Sticky header on scroll | Position fixed

A sticky header of the website helps visitors to visit all other pages easily. Do not need to scroll up and down to visit another page of the website. A fixed position of the header is known as a sticky header. A sticky header on the scroll is created by the CSS and JS. There are a lot of CSS attributes or Properties available. through which you can manage the header fixed position. Sticky header or fixed header is done by the CSS position fixed. At the top of the website a part of the header in which the header logo or header image included. After that, a nav bar (sticky header ) should be attractive.

Sticky header on scroll means when someone scrolls down then the header should be fixed and after that scroll up the page to remove the sticky effect.

Create a CSS for sticky header . position should be fixed

Sticky Header


.header {
  padding: 10px 16px;
  background: #FD8D17;
  color: #f1f1f1;
}

.main-content {
  padding: 16px;
  
}

.sticky {
  position: fixed; /* fixed here */
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

In above CSS we have fixed the position . This will help to make a sticky header .

Now Create JS for sticky header remove or apply .

Sticky header JS

In the above JS script create a pass the id "yourHeader" and also we will pass this id to the header div. When the page is scroll down, the header will be sticky and scroll up to remove the sticky header effect.

No we will include all CSS and JS in one HTML file and run


<!DOCTYPE html>
<html>
<head>


</head>
<body>


  Scroll Down
  Sticky effect -> Scroll Down and see the sticky/fixed header 



  Your website Sticky Header



  Fixed or Sticky header header on scroll
  The header will stick to the top when you reach its scroll position.
  Scroll Up and down to see the sticky or fixed scroll 

  
Your website content is here. Manage your website page. All content here . Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Sticky or Fixed header 



   Your website content is here .Manage your website page . All content here . Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Sticky or Fixed header 
  Your website content is here .Manage your website page . All content here . Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Sticky or Fixed header 
   
					   Your website content is here. Manage your website page. All content here . Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Sticky or Fixed header 







</body>
</html>