I've created a site with pages that each have a fixed header (which is important to me). I've found a fault with this - when hitting page down, the scroll moves too far, not being reduced by the height of the header. So when someone hits page down, they'd have to manually move back up a bit to not miss seeing any content.

I came across a Javascript based fix for this:


On the sample page, this works pretty well. However, whenever I try to integrate this into my pages, it doesn't have an effect. Some people elsewhere online have nicely tried to help, but to no avail so far. One person did modify the code for the page scroll to substitute "header" for bar, but that's about all the progress so far.

I've setup two jsfiddle pages:

  • One that contains a "dummy" page I've created. My pages are not hosted yet and I'm not quite ready to have the content public. So I setup this, which contains identical code to one of my actual pages, but generic content.

  • The modified page scroll Javascript (replacing the "bar" with "header"), to compare to the original linked above.


Does anyone here have an idea what to do with this? I'm a beginner at this stuff, and tried to figure it out as best I can, but can't get anything to work correctly. Some suggestions others have made ended up messing up my pages in other ways, and still didn't get the Javascript page scroll to work correctly.