position:fixed navigation header overlapping browser scroll bar when using overflow-x
Kondax Design
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;)
700 Software
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)
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Box2d: Starting angle of revolute joint
- Next: Changing font colors of tabs in Visual Studio 2013 IDE
Related
Related Related
- 1
fixed position header overlapping
- 2
Navigation bar follows scroll when fixed
- 3
Navigation bar follows scroll when fixed
- 4
HTML fixed header bar when scroll
- 5
Make Fixed Gridview Header to ignore browser Scroll-bar JQuery
- 6
Fixed header and hide (scroll) address bar mobile browser with MDL framework?
- 7
Header in fixed position is overlapping with container div when the window is reduced in width
- 8
Fixed navigation bar would not work even using position: fixed in css
- 9
scroll and position: fixed inside overflow: scroll div
- 10
Navigation bar fixed after scroll?
- 11
Scroll to anchor position with fixed header
- 12
How to position sticky header on fixed position div with overflow-y: scroll
- 13
How to hide the corners of a scroll bar when using scroll as overflow
- 14
How to hide the corners of a scroll bar when using scroll as overflow
- 15
CSS fixed list header using one scroll bar
- 16
JQuery for fixed position of navigation bar
- 17
fixed navigation bar overlaying content when position is given dynamically
- 18
Position fixed and overflow-y:scroll issue
- 19
Position fixed sidebar with overflow scroll not scrolling to bottom
- 20
Make navigation change to `position: fixed` when scrolled X amount
- 21
Snapping a div to a fixed navigation bar on scroll
- 22
How to get position:fixed; behavior with scroll bar
- 23
Header is disappearing when the position is fixed
- 24
Margin not working with fixed position navigation bar
- 25
Force horizontal scroll bar when using default android browser
- 26
Fixed navigation bar not overlapping some parts of my website
- 27
How to add scroll auto on overflow in case the parent as `fixed` position
- 28
Overlapping dynamic fixed header
- 29
Why the scroll bar is ignored on my div with overflow-x=scroll?
Comments