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

Posted 2023-05-08

【中文标题】带有固定标题的JQuery页面滚动问题

【英文标题】：JQuery page scroll issue with fixed header

【发布时间】：2011-09-11 20:27:20

【问题描述】：

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

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

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

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

非常感谢任何帮助，

林登

【参考方案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);