Geek Answers Handbook

How to save the navigation bar at the top of the page?

I'm trying to make my navigation bar at the top of the page, like forbes.com

I know what I could do

nav { position: fixed; top: 0; }

but the navigation bar is not at the top of the page, it appears after the logo ... However, when you scroll down, I want the navigation bar to adhere to the top of the screen.

This is my website

+7
source share
6 answers

You can try this in jQuery like this:

HTML:

 <div id="wrapper"> <header> <h1>Floater Navigation</h1> </header> <nav> <p>Navigation Content</p> </nav> <div id="content"> <p>Lorem Ipsum.</p> </div> </div>

CSS:

 #wrapper { width:940px; margin: 0 auto; } header { text-align:center; padding:70px 0; } nav { background: #000000; height: 60px; width: 960px; margin-left: -10px; line-height:50px; position: relative; } #content { background: #fff; height: 1500px; /* presetting the height */ box-shadow: 0 0 5px rgba(0,0,0,0.3); } .fixed { position:fixed; }

JQuery:

 $(document).ready(function() { // Calculate the height of <header> // Use outerHeight() instead of height() if have padding var aboveHeight = $('header').outerHeight(); // when scroll $(window).scroll(function(){ // if scrolled down more than the headers height if ($(window).scrollTop() > aboveHeight){ // if yes, add "fixed" class to the <nav> // add padding top to the #content // (value is same as the height of the nav) $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px'); } else { // when scroll up or less than aboveHeight, // remove the "fixed" class, and the padding-top $('nav').removeClass('fixed').next().css('padding-top','0'); } }); });

source: http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/

+5
source

the solution is simple, keep CSS when adding px

 nav { position: fixed; top: 0px; }
+5
source

Here is a way to do it without jQuery. It works by installing a scroll listener in a window and switching the navigation bar class when the scroll reaches the right position.

 var body = document.getElementsByTagName("body")[0]; var navigation = document.getElementById("navigation"); window.addEventListener("scroll", function(evt) { if (body.scrollTop > navigation.getBoundingClientRect().bottom) { // when the scroll y is bigger than the nav y set class to fixednav navigation.className = "fixednav" } else { // Overwise set the class to staticnav navigation.className = "staticnav" } }); 
 h1 { margin: 0; padding: 10px; } body { margin: 0px; background-color: white; } p { margin: 10px; } .fixednav { position: fixed; top: 0; left: 0; } .staticnav { position: static; } #navigation { background-color: blue; padding: 10px; width: 100%; } #navigation a { padding: 10px; color: white; text-decoration: none; } 
 <h1> Hello world </h1> <nav id="navigation" class="staticnav"><a href="#">Home</a> <a href="#">About</a> </nav> <!-- We initialize the nav with static condition --> <p> Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
0
source

Since the navigation bar sticks to the top, scrolling it.

 .affix { top: 0px; margin: 0px 20px; } .affix + .container { padding: 5px; } 
 <nav class="navbar navbar-default" data-spy="affix" data-offset-top="50"> ... </nav>

"navbar" creates its own block, so all you have to do is specify only the field in your css file .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } Z-index sets the priority for this particular element, so that other elements do not scroll it. If the z-index has a positive value, then it has the highest priority, otherwise - the lowest priority (for negative values). Hope this will be helpful.

0
source

In your CSS file:

 body { padding-top: 0px; }
0
source

Use the absolute position and set the upper value in the number of pixels that you want the Nav panel to be at the top of the browser.

-1
source

More articles:


All Articles