Create Sticky Header

How To Create Sticky Header

by Vikash Pareek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<header>
  <div class="container">
    <div class="custom-logo">
      <h1>Custom Logo</h1>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="https://webtutorialhindi.com/">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Term Condition</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</header>
<div class="banner">

</div>

CSS

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
img{
  max-width: 100%;
}
body{
  font-family: sans-serif;
}
.container{
  max-width: 97%;
  margin: auto;
}
a{
  text-decoration: none;
  color: #000;
  font-size: 20px;
  text-transform: uppercase;
}
li{
  list-style: none;
  display: inline-block;
  padding: 0 10px;
}
header{
  width: 100%;
  padding: 20px 0px;
  background: #fff;
  box-shadow: 0px 1px 10px 1px #ccc;
}
header .container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.custom-logo{
  margin-right: auto;
}
.navbar{
  margin-left: auto;
}
.banner{
  width: 100%;
  float: left;
  margin-bottom: 40%;
}
.fixed{
  position: fixed;
  top: 0;
  left: 0;
  animation: scrolltop .7s linear;
  background: #184099;
  padding: 10px 0px;
}
.fixed a{
  color: #fff;
  font-size: 14px;
}
.fixed h1{
  color: #fff;
  font-size: 25px;
}
@keyframes scrolltop {
  0% { top: -100px; opacity: .4; }
  100% { top: 0; opacity: 1; }
}
.banner{
  height: 1000px;
}
 @media (max-width: 1190px){
   h1{font-size: 20px;}
   a{font-size: 14px;}
}
@media (max-width: 992px){
  li {padding: 0 6px;}
}

JavaScript

$(window).scroll(function(){
  var sticky = $('header'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});