Q:

position:fixed navigation header overlapping browser scroll bar when using overflow-x

I'm working on developing a website but I'm facing an issue.
I'm creating a navigational bar which works 90% - there is just a little issue. When a user scrolls to a certain distance, the navigational bar becomes 'stuck' to the page, scrolling with the user. When the navigational bar is 'stuck', it overlaps the main browser bar. 
I'm not too sure why this happens, but I believe that the div above it might be causing the issue.
Ignore the icons to the right of the page, windows eight.
Here's the whole page and stylesheet: https://gist.github.com/TaylerKing/7977e60099c3726938fb
Excuse me for the rusty styling, haven't done pure web design for a year or two;)

A:

The problem is the use of overflow-x:hidden, combined with the navigation bar that is position:fixed. Using position:fixed in unusual situations like this is not as well supported as you might expect.
An alternative would be to use position:relative, and have JavaScript update the top as appropriate.
So in your function navigation rather than adding and removing fixed, you would instead be setting $('.navigation').css('top', window_top - div_top). (remember, the div.navigation has to be position:relative first)

