Make a nav bar stick to the top when scrolling wit

Question

I am trying to make my nav bar move with the page but stick to the top if the user scrolls down. Could anyone provide any examples or how to? Much appreciated. (I'm hopeless in any other language). I tried using the css sticky but it didn't work.

<div class="headercss">
    <div class="headerlogo"></div>
    <div class="nav">
        <ul>
            <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>

 

/* www..com
Blinx Service
Created by Pierre Chedraoui
(c) Copyright 2015
*/

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: auto;
    height: 320px;
    background-color: #000000;
    position: relative;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: relative;
}

.nav {
    width: auto;
    height: 70px;
    background-color: #272727;
    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;
    font-size: 12px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway', Arial;
    letter-spacing: 2pt;
    line-height: 200%;
    overflow: hidden;
}

a:hover, a:active {
    background-color: #242424;
}

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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/

Answer 5

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

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.