Creating sticky header on scroll using CSS

: 8762

Last Updated : 15/07/2022

Posted By :- vikas_jk

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

Sticky Navigation Header using CSS
Sticky Div on Scroll using JavaScript/CSS
Sticky header using CSS Flexbox

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

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

Sticky header using CSS Flexbox

You can also create sticky header using CSS flex property, which is now supported in almost all modern browsers.

html, body {
  margin:0;
  height:100%;
  min-height:100%;
}
body {
  margin:0;
  display: flex;
  flex-direction: column;
}
header {
  flex: 1 0 10%;
  background:red;
}
.content {
    flex: auto;
    overflow-y: auto;
}
article {
    background:yellow;
}

and here is the fiddle demo link: http://jsfiddle.net/7wpaoju4/