引导偏移滚动不起作用

导航栏的工作方式和平滑滚动一样，但我无法更改偏移。我的导航是86px，但无论多少像素我改变它仍然去同一个地方。引导偏移滚动不起作用

$(document).ready(function() { 
    $('body').scrollspy({target: ".navbar", offset: 86}); 
    $("#myNavbar a").on('click', function(event) { 
     if (this.hash !== "") { 
      event.preventDefault(); 
      var hash = this.hash; 
      $('html, body').animate({ 
       scrollTop: $(hash).offset().top 
       }, 800, function(){ 
       window.location.hash = hash; 
      }); 
     } 
    }); 
});

我将信息直接添加到body标签，但仍然没有变化。我知道，jQuery的工作，因为它确实滚动平滑和崩溃导航工程以及。

<body data-spy="scroll" data-target=".navbar" data-offset="86">

来源

2016-06-12 JonW

我不认为偏移做你认为它的确如此。我不确定'滚动到'的位置。你必须用填充来做到这一点。

此处的偏移量意味着屏幕顶部与滚动到的部分之间的距离。换句话说：它所做的全部工作就是确定navbar>标签在哪一刻变为活动状态。

结帐出来：https://jsfiddle.net/wietsedevries/gu0b0dg2/1/

在这个例子中，我设置data-offset="51"，导航栏的高度也51px，所以当我向下滚动导航栏>标签变为激活状态，什么时候导航栏点击这部分。

来源

2016-06-12 15:46:16

好的，谢谢你，这是有道理的。有没有其他的方式，而不是使用填充来调整页面结束时，当你点击一个导航栏>标签？现在，我有容器div给定ID如家关于etc. – JonW

该页面滚动到与相应的ID元素，所以你可以添加一个隐藏的虚拟元素与该ID并将其放置在你想要的位置。 –

如果这回答了你的问题，请标记为已回答;） –

是的，偏移量仅用于确定导航链接何时高亮显示。点击链接时不要定位屏幕。即滚动部分取决于你。你可以使用一个小小的JS来做这样的事情：

var offset = 80; 

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

来源

2017-07-12 14:03:06 Josh

引导偏移滚动不起作用

回答

相关问题