Why does my nav float left when I change the position to fixed? How do I fix that issue and keep it centered?
Question
$(function(){ $(window).on('scroll', function(){ if($(window).scrollTop() >= $('.sunContainer').height() ) { $('.nav').addClass('stick'); } else { $('.nav').removeClass('stick'); } }); });
html, body { background-size: cover; background-attachment: fixed; text-align: center; } .stick { position: fixed; } #wrapper { height:3000px; width: 100%; text-align: center; } .nav { width: 90%; height:50px; background-color:#FFB00F; text-align: center; margin: 0 auto; } .tab_holder { width:1000px; text-align: center; } li { width:120px; height:50px; display: inline-block; text-align: center; } li:hover { background-color:#2F4F4F; } a { text-decoration: none; color:black; } .imge { margin-top: 50px; } .sunContainer { background-color:#187249; width:100%; height:700px; text-align: center; } .content { background-color: lightsalmon; width:100%; height:700px; } .third { background-color: khaki; width:100%; height:700px; }
<!DOCTYPE> <html> <head> <link href='sunset.css' rel='stylesheet'> </head> <body id='body'> <div id='wrapper'> <div class='sunContainer'> <div class='nav'> <ul class='tab_holder'> <li><a href='#'>About</a></li> <li><a href='#'>The Kidd Frankie</a></li> <li><a href='#'>Contact</a></li> </ul> </div> <!-- Find a picture of the rising sun --> <img class='imge' src='one.jpg'> <img class='imge' src='two.jpg'> <img class='imge' src='three.jpg'> <img class='imge' src='four.jpg'> </div> <div class='content'> Stuff will be here </div> <div class='third'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src='sunset.js'></script> </body> </html>
While just experimenting and playing around I ran into an issue. The issue being that whenever my nav adds the class it just floats left. At first I thought it was because I wasnt adding anything in the .stick class but realized that isnt issue. Anyone ever run into this issue? Seems like its a css problem and not the js. Thanks in advance!
1 answers
solution1
1 ACCPTED 2017-03-14 19:49:28
You are centering your nav using margin: 0 auto . But when it gets assigned position: fixed by that .stick class, this centering method won't work anymore - it only works for position: relative elements.
Since there is no other parameter in your CSS, as a fixed element it's simply placed at the default position left: 0
You can avoid that by assigning left: 50%; and transform: translateX(-50%); to it.
$(function(){ $(window).on('scroll', function(){ if($(window).scrollTop() >= $('.sunContainer').height() ) { $('.nav').addClass('stick'); } else { $('.nav').removeClass('stick'); } }); });
html, body { background-size: cover; background-attachment: fixed; text-align: center; } .stick { position: fixed; left: 50%; transform: translatex(-50%); } #wrapper { height:3000px; width: 100%; text-align: center; } .nav { width: 90%; height:50px; background-color:#FFB00F; text-align: center; margin: 0 auto; } .tab_holder { width:1000px; text-align: center; } li { width:120px; height:50px; display: inline-block; text-align: center; } li:hover { background-color:#2F4F4F; } a { text-decoration: none; color:black; } .imge { margin-top: 50px; } .sunContainer { background-color:#187249; width:100%; height:700px; text-align: center; } .content { background-color: lightsalmon; width:100%; height:700px; } .third { background-color: khaki; width:100%; height:700px; }
<!DOCTYPE> <html> <head> <link href='sunset.css' rel='stylesheet'> </head> <body id='body'> <div id='wrapper'> <div class='sunContainer'> <div class='nav'> <ul class='tab_holder'> <li><a href='#'>About</a></li> <li><a href='#'>The Kidd Frankie</a></li> <li><a href='#'>Contact</a></li> </ul> </div> <!-- Find a picture of the rising sun --> <img class='imge' src='one.jpg'> <img class='imge' src='two.jpg'> <img class='imge' src='three.jpg'> <img class='imge' src='four.jpg'> </div> <div class='content'> Stuff will be here </div> <div class='third'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src='sunset.js'></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is my card overlapping the fixed nav when I hover it?
How do I fix the position of an input so it's always below an element that's centered on the screen but its size can change?
How do I keep a position:fixed element next to the center element
Why does my background image disappear when I make its position fixed?
How do I keep nav-tabs in boostrap fixed on the top while scrolling?
How do I keep my image fixed in the center?
How do I keep my fixed header flowing with rest of the body when using an off-canvas solution?
How do I retain the position of a div's vertical position while changing their horizontal while trying to float left?
How do I change the position of my tooltip?
How to keep my top menu stay fixed when i scroll
Related Tags