Question

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

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

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

有什么想法吗？

干杯

Answer 1

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

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

当我们点击词缀导航栏时，就是这个事件。

这不太可能是手工制作词缀，我希望在开发中比我更好的人可以帮助你......：

Bootply： 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);

Answer 2

准备好一个丑陋的解决方案，但哪个适用于我？在所有附加的锚点上，我添加了一个类词缀锚，

然后，在我的CSS中：

.affix-anchor{
    padding-top:60px;
    margin-top:-60px;
}
.affix-anchor:first-of-type{
    margin-top:0px;
}

当然，这可以通过javascript进行大规模的

Answer 3

而不是使用javascript滚动只需添加一个相对定位的div作为锚：

<section>
    <div id="my-anchor-id" style="position: relative; top: -50px"></div>
    Content
</section

将top设置为标题的高度或更多。

固定标题和Bootstrap Affix / Scrollspy的问题 - 没有跳到正确的位置

3 个答案: