In this article, I have explained how you can create sticky navigation bar on scroll using HTML and CSS only.

Sticky Navigation Header using CSS

Let's create the HTML with navigation bar, and some content inside main page

<div class="sticky-header">
  <ul class="navigation">
   <li><a href="javascript:void(0)">Home</a></li>
   <li><a href="javascript:void(0)">Contact</a></li>
  </ul>
</div>
<div class="main-content">
 <p>
  This is main content
 </p>
 <p>
  try to scroll the page
 </p>
</div>

In the above HTML code, we have simply added a navigation bar using <ul> and <li> tags, and assigned the class "sticky-header" to the main div

Now, we will the main CSS code, which will make our navigation sticky on top

.sticky-header {
 background-color: #000;
 color: #fff;
 width:100%;
 position: fixed; /*CSS property which makes nav sticky on top*/
 top: 0;
 left: 0;
 margin: 0;
 padding: 10px;
 text-align:left;
 letter-spacing: 3px;
}

above css code, is the class which makes navigation sticky using "position :fixed" property, using this property we make sure, the content will remain positioned as fixed during scroll in HTML page.

"top:0; left:0" gives the position from top of browser, where content should be placed.

Complete CSS

.navigation{
  margin:0;
  padding:0
}
.navigation li{
  padding:0;
  list-style-type:none;
  display:inline-block
}
.navigation li a{
  color:white;
}
.sticky-header {
background-color: #000;
color: #fff;
width:100%;
position: fixed;  /*CSS property which makes nav sticky on top*/
top: 0;
left: 0;
margin: 0;
padding: 10px;
text-align:left;
letter-spacing: 3px;
}
.main-content{
height:1000px;
padding:100px 0px 0px 50px;
}
.main-content p{
height:30px;
}

When used above HTML/CSS code, you will see output as below

sticky-navigation-bar-using-css-min.gif

Here is the fiddle demo

Sticky Div on Scroll using JavaScript/CSS

Sometimes, we may need to show html "div" area to user once user has passed scrolling through it, so now in this method, we will use Javascript to make div visible on Scroll and stick it at top.

Suppose this our HTML

<div id="MainDiv">
  <div id="stickyDiv" class="stickyDiv">
    Scroll to this and it will stick on top
  </div>
</div>

Then we will use below Javascript code and CSS, to make position of "div" as fixed, as soon as user scroll's to it's top.

function findOffset(element) {
  var top = 0, left = 0;

  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);

  return {
    top: top,
    left: left
  };
}

window.onload = function () {
  var stickyDivHeader = document.getElementById('stickyDiv');
  var headerOffset = findOffset(stickyDivHeader);
  
  window.onscroll = function() {
    // body.scrollTop is deprecated and no longer available on Firefox
    var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
    //if scroll position is greater than stickyDiv, make div fixed at top 
    // by adding class 'fixed'
    if (bodyScrollTop > headerOffset.top) {
      stickyDivHeader.classList.add('fixed');
    } else {
      stickyDivHeader.classList.remove('fixed');
    }
  };
};

I have explained some part of Javascript code using Comments.

Basically, we are checking if current user scroll position is greater than "stickyDiv" header, we add class "fixed" so it can have css property "position:fixed", else we remove the class "fixed" class from the "stickyDiv".

Here is the required CSS

#MainDiv { 
  height: 2000px;
  padding-top: 100px; 
 }

.stickyDiv { 
  background: red; 
  width: 100%;
 }

.fixed {
  position: fixed;
  top:0;
 }

Fiddle Demo

 

You may also like to read:

Social media icons hover effect (CSS Based)

Useful CSS animation examples with code & animation basics