JQuery page scroll issue with fixed header

Question

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

natedavisolds · Accepted Answer · 2011-06-09 16:07:22Z

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

answered Jun 9, 2011 at 16:07

natedavisolds

4,2951 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery page scroll issue with fixed header

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related