引导偏移滚动间谍不工作

Question

导航条和平滑的卷轴一样工作，但是我不能改变偏移量。我的导航是86 px，但是不管我换了多少px，它还是会转到同一个地方。

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

我把信息直接添加到身体标签上，但仍然没有改变。我知道jquery正在工作，因为它确实滚动平滑，崩溃导航也能工作。

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

Answer 1

我不认为偏移能像你想的那样。我不确定“滚动到”的位置。你得用填充物做这个。

此上下文中的偏移量意味着屏幕顶部与要滚动的部分之间的距离。换句话说:它所做的就是确定navbar >a标记在什么时候变为活动状态。

Answer 2

是的，偏移量只用于确定您的导航链接何时突出显示。单击链接时不要定位屏幕。即滚动部分由你来决定。您可以使用一些JS来这样做：

var offset = 80;

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

Answer 3

引导使用偏移只解决间谍，而不是滚动。这意味着滚动到合适的地方取决于你。

尝试以下操作，它对我有效:为导航单击添加一个事件处理程序。

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