sticky header jquery – jQuery Simple Sticky Header on Scroll

sticky header jquery – The header will stick to the top when you reach its scroll position. Create Sticky Header Using jQuery And CSS.

sticky header jquery – How To Create an On Scroll Fixed Header?

A simple sticky header using .addClass and .removeClass using jQuery Example with demo. you can use List consist of jquery position fixed header, fixed footer, fixed table header or many more.

How to fix a header on scroll?

Step 1. HTML code
Make a HTML file and define markup and scripting

<div class="customclass"></div>

Step 2. Css code
Make a CSS file and define styling

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }

jQuery code

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

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

Free Live Chat for Any Issue

JQuery Simple Sticky Header On Scroll?

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
*{
  margin:0;
  padding:0;
  list-style:none;
}
body{
  height:1000px;
}
header{
  position:fixed;
  width: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  transition: all 0.4s ease;
}
header.customclass {
   text-align: center;
  
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  padding-left: 20px;
}

ul{
  display:inline-block;
}
li{
  display:inline-block;
  padding:0 40px;
}  

.text{
  text-align:center;
  font-size:40px;
  position:absolute;
  top:140px;
  left:600px;
}
</style>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("customclass");
  }
  else{
    $('header').removeClass("customclass");
  }
});
</script>
</head>
<body>

<header>
  <ul>
    <li>Home</li>
    <li>Pakainfo</li>
    <li>w3diy</li>
    <li>Guest Post</li>
    <li>Tools</li>
</header>
  
  <div class="text">
  Great Work ^
  </div>


</body>
</html>

Don’t Miss : Fixed div on scroll jQuery example

I hope you get an idea about sticky header jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.

Rate this post