具有固定标题的jQuery页面滚动问题 [英] JQuery page scroll issue with fixed header

问题描述

当使用以下代码单击链接时，我使用一行JQuery将用户定向到页面的右侧:

I'm using a line of JQuery to direct my users to the right part of my page when a link is clicked using the below code:

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

它工作正常，并滚动到页面上的正确点.但是，我在网站上有一个固定的导航栏(高度:49像素；位置:固定；)，它会在页面顶部滚动时滚动.当页面向下滚动到所需的内容，然后继续在导航栏下方滚动时，就会出现问题.

It's working fine and scrolling to the correct point on the page. However I have a fixed nav bar (height: 49px; position: fixed;) on the site that sicks at the top of the page as it scrolls. The issue arises when the page scrolls down to the desired content, but then continues to scroll underneath the nav bar obscuring it from vision.

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

My question is, how can I modify the above code to compensate for the navigation bar?

任何帮助表示赞赏，

林登

推荐答案

您将需要获取标头的externalHeight并将其从滚动量中减去.

You will need to get the outerHeight of the header and subtract it from the amount that you are scrolling to.

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页面滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！