jQuery scrollTo fixed header offset

jquery offset scrollto
Tom picture Tom · Jun 13, 2012 · Viewed 29k times · Source

I am using the jQuery scrollTo plugin as you can see on the page which I'm building http://portfolio.tomvervoort.net/

Because of the 300px fixed header the content moves under the header. You can see this clearly when you click the about button in the menu. Is it possible to add an 300px offset to the scrollTo script so everything stays positioned under the header/menu?

Answer

Andy picture Andy · Jun 13, 2012

You could try changing this line in jquery.nav.js:

$.scrollTo(newLoc, o.scrollSpeed, {

to

$.scrollTo($('newLoc').offset().top-300, o.scrollSpeed, {

So instead of telling scrollto to scroll to exactly that element, you get the position of the element yourself and subtract 300

Related questions

offsetTop vs. jQuery.offset().top

I have read that offsetLeft and offsetTop do not work properly in all browsers. jQuery.offset() is supposed to provide an abstraction for this to provide the correct value xbrowser. What I am trying to do is get the coordinates …

Read More
Using jquery to get element's position relative to viewport

What's the proper way to get the position of an element on the page relative to the viewport (rather than the document). jQuery.offset function seemed promising: Get the current coordinates of the first element, or set the coordinates of …

Read More
Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

I have scoured the Internet far and wide and while I found this stackoverflow post insightful Is it possible to change the position of Bootstrap popovers based on screen width?, it still didn't answer my question, likely due to my …

Read More