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 {
    }

Rabbitry

Refer here: #6981321 – Saransarangi

Answer 1

$(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>

Saransarangi

Nice one, but instead of static height you can also calculate the height of the banner eg. $('#banner').height() Improved Code – Mintz

Thanks for your solution! – Falsehood

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... – Meaghanmeagher

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. – Align

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; – Cottonade

Answer 2

add to your .nav css block the

position: fixed

and it will work

Schaaf

Answer 3

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();
  });
});

Quincy

Finally! Took me forever to find an example that properly dealt with a variable height nav. Well done and thanks! – Wimbush

Answer 4

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 */
}

Interlink

This worked on my template. Thanks !! But sticky and fixed keyword makes a hell lot of difference. – Westernmost

Answer 5

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

Radke

@Pierre Then apply position: fixed to the .nav – Radke

@Pierre If you want it to be at the very top, add top:0; – Radke

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 – Rabbitry

@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: #14496740 This question has been asked. Try searching for existing questions before posting yours. – Radke

Answer 6

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.

Wadesworth

Answer 7

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/

Analog

That is so smelly. Please, do not code like this, for the sake of Internet – Demur

Answer 8

/* 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');
    }
  });
});

Blythe

Answer 9

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

Metempirics

Please don't post duplicate answers - 2. Instead, flag the question as a duplicate if you believe it to be so. – Lemire

Thanks Rob, will do in future – Metempirics

Answer 10

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;
    }

Flocculent

Answer 11

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.

Prompter