jQuery scrollTo fixed header offset

Question

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?

Can we have the code in the question please so the abbreviated answer below makes sense! — Chris Pink, Sep 17 '19 at 15:18

score 21 · Answer 1 · answered Jun 13 '12 at 16:35

21

You can use the "offset" setting as described on:

http://flesler.blogspot.com.ar/2007/10/jqueryscrollto.html

Something like:

$.scrollTo(newLoc, o.scrollSpeed, {
     // ...
     offset:-300
});

answered Jun 13 '12 at 16:35

Ariel Flesler

612
1
4
13

Andy · Accepted Answer · 2014-02-06T10:22:42.287

20

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

edited Feb 06 '14 at 10:22

answered Jun 13 '12 at 00:06

Andy

29,707
9
41
58

Awesome, Worked like a charm! – Tom Jun 13 '12 at 15:41
1

Makes no sense without context – Chris Pink Sep 17 '19 at 15:18
@ChrisPink i think it's not too hard to figure out the context from the answer even if the website from the question isn't online any more – Andy Sep 18 '19 at 10:50

jQuery scrollTo fixed header offset

2 Answers2