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

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');
});

JQuery Simple Sticky Header On Scroll?

index.html

  

    
Home
    
Pakainfo
    
w3diy
    
Guest Post
    
Tools

  
  

  Great Work ^
  

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.