Question

所以我在一个有固定导航栏的网站上工作：

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);
});

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

任何帮助？

非常感谢！

Answer 1

标题不固定。我看到你正在使用bootstrap，所以你可以使用navbar-fixed-top类来使它变粘。您需要将header代码中的课程从navbar-static-top更改为navbar-fixed-top。

要回答问题的第二部分，由于您在项目中使用了bootstrap，因此这个答案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。

使用.affix和固定导航栏进行侧栏偏移

1 个答案: