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

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

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

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

 $(document).ready(function(){ $("#myNav").affix({ offset: { top: 125 } }); });  

有任何想法吗？

干杯

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作为锚点：

 
 
 Content  

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