bootstrap offset scrollspy 不工作

Question

导航栏和平滑滚动一样工作，但我无法更改偏移量。我的导航是 86 像素，但无论我更改多少像素，它仍然会到达同一个地方。

$(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">

Answer 1

我不认为 offset 会像您认为的那样工作。我没有确定 'scroll-to' 位置。你必须用填充来做到这一点。

此处的偏移量是指屏幕顶部与您要滚动到的部分之间的距离。换句话说：它所做的只是确定导航栏 > 标签何时变为活动状态。

Answer 2

是的，偏移量仅用于确定您的导航 link 何时突出显示。单击 link 时不要定位屏幕。 IE。滚动部分由您决定。你可以使用一点 JS 来做到这一点：

var offset = 80;

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

Answer 3

Bootstrap 使用 offset 仅解决间谍问题，不解决滚动问题。这意味着滚动到正确的位置由您决定。

试试这个，它对我有用：为导航点击添加一个事件处理程序。

var offset = 86;

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

在这里找到：

https://github.com/twitter/bootstrap/issues/3316

bootstrap offset scrollspy 不工作

bootstrap offset scrollspy not working

offset

twitter-bootstrap

scrollspy