javascript - 固定 header 和 Bootstrap Affix/Scrollspy 问题 - 不跳转到正确位置

Question

我在尝试让内容的位置与子导航一起跳转时遇到问题:

这是一个演示 http://jsfiddle.net/52VtD/2661/

正如您所看到的，当您点击一个链接时，由于固定标题，它不在导航旁边。内容经过标题。

<script type="text/javascript">
    $(document).ready(function(){
        $("#myNav").affix({
            offset: { 
                top: 125 
            }
        });
    });
</script>

有什么想法吗？

干杯

Answer 1

我对你的问题投了赞成票，因为我正在努力解决这个问题......

$(window).on('click.bs.affix.data-api',

就是我们点击词缀导航栏的事件。

这不太可能是手动制作词缀的方法，我希望在开发方面比我更好的人可以帮助你......:

Bootstrap : http://jsfiddle.net/52VtD/2662/

Js:

$(window).on('click.bs.affix.data-api', function(){

    setTimeout( function(){
        $target = $("#myNav li.active a").attr('href'); 
        $target = $( $target );
        //alert($target);
        $top = $target.offset().top - $('.page-header').height();

        window.scrollTo( 0 , $top);
        e.stopPropagtion();

    }, 10);

});

SetTimeout 因为词缀在...之前完成他的工作

评论后更新:

Bootply: http://jsfiddle.net/52VtD/2663/

摘录:

setTimeout( function(){
    $target = $("#myNav li.active a").attr('href'); 
    $target = $( $target );
    //alert($target);
    $top = $target.offset().top - $('.page-header').height();

    window.scrollTo( 0 , $top);
    e.stopPropagtion();
    $("#myNav li.active a").removeClass('active');  //  <--- HERE
}, 10);