Question

I’ve got a page with a header and a content.

The header has position: fixed; height: 200px, the content is below.

In the header I have a link <a href="#work" ...> . In the content there is a <div id="work">. When I click the link, the browser scrolls to the work div – the problem is half of the content is covered (remains underneath) the header, because it has position fixed!

I then used the jQuery anchorAnimate plugin, that uses jQuery animate. Here I slightly modified the plugin to take into account that 200px-offset. This worked out fine, in Chrome and Safari.

Not in Firefox, however. The plugin works ok, slides to the correct position, until it calls window.location.hash = element. Firefox then falls back to the default behaviour of setting the element at the top of the page (thus ignoring the offset due to the header – the first problem I described).

I know Firefox 3.6 implements an onhashchange listener. I overrode as per the documentation window.onhashchange = function(){}, which it does call, but it keeps on firing the default action of setting the elements at the top of the window, ignoring my header. How can I fix this?

(Otherwise, would it be possible to set somewhere a window offset in these “fixed header” cases?)

Answer 1

If you can’t find a way to prevent Firefox’s ohhashchange behavior, then your best best is to approach the problem in a different way. A couple of suggestions:

1. Modify anchorAnimate to never set window.location.hash (comment out line 34). The problem with that is that the url will never be changed, and users won’t be able to bookmark or copy a url which directly points to that div.

2. Write your own code (or modify anchorAnimate) to do something like this:

   var currentScroll = $('html, body').scrollTop();    
   window.location.hash = 'myAnchor';
   $('html, body').scrollTop(currentScroll)
                  .animate({ scrollTop: destination - 200 });
   

That will set the anchor, but immediately scroll you back to where the browser was previously. From there you can animate to any desired scroll position.

I checked in Firefox (and am pretty sure for other browers) that the user will not see a flash of scroll changes.