Question

我正在使用JQuery来平滑滚动图像：

function smoothScrollTo(hash) {
    $("html:not(:animated).,body:not(:animated)").animate({
        scrollTop: $(hash).offset().top
    }, 650, function () {
        location.hash = hash;
    });
}
$(function () {
    $("#content-images li a[href*=#]").click(function () {
        this.blur();
        smoothScrollTo(this.hash);
        return false;
    });
});

它工作正常但是我在网站上有一个固定的导航栏，当它滚动时它停留在页面的顶部。当页面向下滚动到下一个图像时，它会在导航栏下方滚动，使其与视觉分开。

我的问题是，如何修改上面的代码以补偿固定导航栏的高度？

非常感谢任何帮助，

Ť

Answer 1

变化：

scrollTop: $(hash).offset().top

为：

scrollTop: $(hash).offset().top + $('#fixed_nav_bar').outerHeight()

这应该考虑固定的导航栏高度。

希望有所帮助：）

Answer 2

使用will的答案，试试这个：

function smoothScrollTo(hash, t) { // two params
    $("html:not(:animated).,body:not(:animated)").animate({
        scrollTop: $(hash).offset().top + $('#fixed_nav_bar').outerHeight()
    }, 650, function () {
        var tmp = t.id; // hold the id
        t.id = '';      // remove it so we don't jump
        location.hash = hash;
        t.id = tmp;     // now that we didn't jump we can move it back
    });
}
$(function () {
    $("#content-images li a[href*=#]").click(function () {
        this.blur();
        smoothScrollTo(this.hash, this); // two args
        return false;
    });
});

Jquery scrolltop offsetting固定头

2 个答案: