Question

当使用以下代码点击链接时，我正在使用一行JQuery将我的用户引导到我页面的右侧部分：

$('html, body').animate({ scrollTop: $("#cell_" + scrollTo).offset().top }, 1500);

它工作正常并滚动到页面上的正确位置。但是我在网站上有一个固定的导航栏（高度：49px;位置：固定;），当它滚动时会在页面顶部出现问题。当页面向下滚动到所需内容时会出现问题，但随后会继续在导航栏下滚动，使其从视觉中遮挡。

我的问题是，如何修改上述代码以补偿导航栏？

非常感谢任何帮助，

林登

Answer 1

您需要获取标题的outerHeight并从您滚动的金额中减去它。

var scrollToPosition = parseInt($("#cell_" + scrollTo).offset().top) - parseInt($('#header').outerHeight());

if (scrollToPosition < 0) { scrollToPosition = 0 } // make sure it is not negative

$('html, body').animate({ scrollTop: scrollToPosition }, 1500);

带有固定标头的JQuery页面滚动问题

1 个答案: