使用 .affix 和固定导航栏的侧边栏偏移答案

【问题标题】：Sidebar offset using .affix and a fixed navbar使用 .affix 和固定导航栏的侧边栏偏移
【发布时间】：2016-04-26 21:26:29
【问题描述】：

所以我正在开发一个有固定导航栏的网站：

http://abnetworksa.rewind9.com/servicios/infraestructura/

除了固定的导航栏外，还有一个“粘性”侧边栏。此侧边栏链接是将用户重定向到同一页面中特定内容的锚点。

似乎一切正常。但是，当单击这些侧边栏链接之一时，目标内容标题隐藏在固定导航栏下。有没有办法为这个侧边栏链接设置和偏移？

我试过了

var offset = 380;

$('.sidebar-nav li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, +offset);
});

但它似乎不起作用，它似乎开始从下到上进行一些奇怪的计算。

有什么帮助吗？

非常感谢！

【问题讨论】：

我不知道是否有任何东西被掩盖，因为导航栏没有固定。它似乎有位置：相对。
我的回答对你有帮助吗？

标签： javascript css twitter-bootstrap affix

【解决方案1】：

标题不固定。我看到您正在使用引导程序，因此您可以使用 navbar-fixed-top 类使其具有粘性。您需要将 header 标签上的类从 navbar-static-top 更改为 navbar-fixed-top。

要回答您问题的第二部分，由于您在项目中使用引导程序，因此此答案https://stackoverflow.com/a/14805098/3070770 将对您有所帮助。

 $(".sidebar-nav li a").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;
   var heightOfNavigationMenu = $('.navbar').height
   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top - heightOfNavigationMenu
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

注意变量heightOfNavigationMenu。还有一些浏览器不支持ScrollIntoView。

【讨论】：