JQuery page scroll issue with fixed header

问题

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);

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?

Any help greatly appreciated,

Lyndon

回答1:

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);

来源：https://stackoverflow.com/questions/6295771/jquery-page-scroll-issue-with-fixed-header