Make a nav bar stick

Question

Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick

/* HEADER */

<div class="headercss">

        <div class="headerlogo">

        </div>

    </div>



    /* BODY */

    body {
        margin: 0px;
        height: 2000px;
    }



    .headercss {
        width: auto;
        height: 320px;
        position: relative;
    }

    .headerlogo {
        width: auto;
        height: 250px;
        position: relative;
    }

    .nav {
        width: auto;
        height: 70px;
        position: relative;
        overflow: hidden;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        float:left;
        width:100%;
        overflow: hidden;
    }


    li {
        float: left;
        width:25%;
        min-width: 243px;
        overflow: hidden;
    }

    a:link, a:visited {
        display: block;
        height: 68px;
        min-width: 243px;
        overflow: hidden;
    }

    a:hover, a:active {
    }

Refer here: http://stackoverflow.com/questions/6980821/fix-object-to-top-of-browser-window-when-scrolling][1] — Yash Thakur, Feb 11 '15 at 10:56

score 49 · Answer 1 · edited Sep 30 '16 at 14:17

$(document).ready(function() {
  
  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

html, body {
 height: 4000px;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#body_div {
 top: 0;
 position: relative;
    height: 200px;
    background-color: green;
}

#banner {
 width: 100%;
 height: 273px;
    background-color: gray;
 overflow: hidden;
}

#nav_bar {
 border: 0;
 background-color: #202020;
 border-radius: 0px;
 margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
 display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
 padding: 0 15.5px;
 color: #3498db;
 text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id='body_div'>
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>

Nice one, but instead of static height you can also calculate the height of the banner eg. `$('#banner').height()` [Improved Code](http://jsfiddle.net/Wj9dD/2111/) — Vipul Bhatt, Aug 29 '16 at 06:31
What about flickering when scrolling to the bottom while navigation is near the top? I just struggled with such "edge-case" and found out that you need to add fixed class to the nav when scroll top, but remove when scroll px i less than (px value from top to the nav MINUS banner height). Banner height can be different depending on content... — Piotr Kowalski, Feb 02 '17 at 08:28
This works great (especially with @VipulBhatt's auto-height tweak), *except* that the page body jumps up by the nav bar's height when it transitions. So you also have to adjust the padding or margin of #body_div at the same time to replace the height that goes missing when #nav_bar becomes fixed. — Stephen R, Oct 01 '17 at 15:42
Finding #banner height might not be ideal, since that could change. Instead, you can get the distance of the nav element from top, using $("#site-navigation").offset().top; — Jake 1986, Apr 16 '19 at 12:06

score 19 · Answer 2 · answered Feb 11 '15 at 10:48

19

add to your .nav css block the

position: fixed

and it will work

answered Feb 11 '15 at 10:48

TheLovelySausage

3,838
15
56
106

score 13 · Answer 3 · edited Dec 21 '16 at 08:05

I hope this can help someone. Determine the nav offset through js and then apply sticky position css to nav:

But first, we will define the styles in the stylesheet, like so.

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

Then, we will apply that class to the navigation conditionally with jQuery.

$(document).ready(function() {
  var stickyNavTop = $('.nav').offset().top;

  var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) { 
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky'); 
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

Finally! Took me forever to find an example that properly dealt with a variable height nav. Well done and thanks! — BitBug, Apr 20 '18 at 23:02

score 8 · Answer 4 · edited Oct 08 '17 at 17:59

8

Just use z-index CSS property as described in the highest liked answer and the nav bar will stick to the top.

Example:

<div class="navigation">
 <nav>
   <ul>
    <li>Home</li>
    <li>Contact</li>
   </ul>
 </nav>

.navigation {
   /* fixed keyword is fine too */
   position: sticky;
   top: 0;
   z-index: 100;
   /* z-index works pretty much like a layer:
   the higher the z-index value, the greater
   it will allow the navigation tag to stay on top
   of other tags */
}

edited Oct 08 '17 at 17:59

Styx

9,863
8
43
53

answered Sep 02 '17 at 02:55

This worked on my template. Thanks !! But sticky and fixed keyword makes a hell lot of difference. – Resheil Agarwal Sep 02 '17 at 04:44

score 4 · Answer 5 · answered Feb 11 '15 at 10:47

4

CSS:

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
}

Attribute position: fixed will keep it stuck, while other content will be scrollable. Don't forget to set width:100% to make it fill fully to the right.

Example

answered Feb 11 '15 at 10:47

Ilia Ross

13,086
11
53
88

@Pierre Then apply `position: fixed` to the `.nav` – Ilia Ross Feb 11 '15 at 10:50
@Pierre If you want it to be at the very top, add `top:0`; – Ilia Ross Feb 11 '15 at 10:50
sorry maybe I'm not trying it right lol, i want the nav bar to scroll with the page, but if it hits the top, i want it to stick to the top. if the user scrolls back up, the nav bar moves back to its position when it needs to.. Thanks – Feb 11 '15 at 10:52
@Pierre It's simple but you would need to detect how much user would scroll and need JavaScript. It's easy, you can read about it here: http://stackoverflow.com/questions/14496240/how-can-i-stick-the-div-after-scrolling-down-a-little This question has been asked. Try searching for existing questions before posting yours. – Ilia Ross Feb 11 '15 at 10:57

score 2 · Answer 6 · answered Feb 11 '15 at 10:49

2

Give headercss position fixed.

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
    top:0
}

Then give the content container a 320px padding-top, so it doesn't get behind the header.

answered Feb 11 '15 at 10:49

Psygnosis

21
2

score 1 · Answer 7 · answered Jul 28 '16 at 11:58

You can do it with CSS only by creating your menu twice. It's not ideal but it gives you the opportunity have a different design for the menu once it's on top and you'll have nothing else than CSS, no jquery. Here is an example with DIV (you can of course change it to NAV if you prefer):

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

And then have the following CSS:

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

Here is a fiddle for you to see: https://jsfiddle.net/brghtk4z/1/

That is so smelly. Please, do not code like this, for the sake of Internet — Benjamin Bouchet, Dec 21 '16 at 07:57

score 0 · Answer 8 · answered Apr 06 '17 at 19:15

/* Add css in your style */


.sticky-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    transition: 0.3s;
}


/* and use this javascript code: */

$(document).ready(function() {

  $(window).scroll(function () {
    if ($(window).scrollTop() > ) {
      $('.headercss').addClass('sticky-header');
    } else{
      $('.headercss').removeClass('sticky-header');
    }
  });
});

score 0 · Answer 9 · edited Apr 13 '17 at 05:55

I would recommend to use Bootstrap. http://getbootstrap.com/. This approach is very straight-forward and light weight.

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-fixed-top">
            <li><a href="#home"> <br>BLINK</a></li>
                <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
                <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
                <li><a href="#about"><br>ABOUT US</a></li>
            </ul>
        </div>
    </div>
</div>

You need to include the Bootstrap into your project, which will include the necessary scripts and styles. Then just call the class 'navbar-fixed-top'. This will do the trick. See above example

Please don't post [duplicate answers](http://stackoverflow.com/a/43384560) - [2](http://stackoverflow.com/a/43384604). Instead, flag the question as a duplicate if you believe it to be so. — Rob, Apr 13 '17 at 06:04

score 0 · Answer 10 · answered Jun 17 '17 at 09:19

0

Just Call this code and call it to your nave bar for sticky navbar

  .sticky {
        /*css for  stickey navbar*/
        position: sticky;
        top: 0; 
        z-index: 100;
    }

answered Jun 17 '17 at 09:19

Hamza Chaudhry

11
1

score 0 · Answer 11 · answered Aug 03 '17 at 06:04

To make header sticky, first you have to give position: fixed; for header in css. Then you can adjust width and height etc. I would highly recommand to follow this article. How to create a sticky website header

Here is code as well to work around on header to make it sticky.

header { 
   position: fixed; 
   right: 0; 
   left: 0; 
   z-index: 999;
}

This code above will go inside your styles.css file.

Make a nav bar stick

11 Answers11

Linked

Related