jQuery Simple Sticky Header on Scroll
- Article
- Comment
Introduction
Nowadays, many jQuery plugins came out with many features. But when requiring all for your website.It will increase page load time and makes your site slow. I Recommend you to go with simple and custom Codes for better functionality and SEO purpose. jQuery Simple Sticky Header on Scroll is a simple tutorial to explain that you can make a simple sticky on your html or WordPress or any site with less code.
It’s very simple to make one with help of some CSS codes and a jQuery function.let’s Start with a html content. The Green Colored Codes are important and with that only your sticky Header will get working. All you need to have some HTML, CSS and JS knowledge to create one. I have given the only needy code here.
So, it won’t give you much trouble for the understanding of main code. Also, give some importance to the Special codes which marked in Green.
HTML
The below one is simple and sample HTML code.
<html>
<head>
<title> jQuery Simple Sticky Header on Scroll Demo- Kvcodes</title>
<script type='text/javascript' src='js/jquery-1.12.3.js'></script>
<style>
<!-- Here Our Styles -->
</style>
</head>
<body>
<div class="header" > <!-- Header Part code within it -->
</div>
<div class="content">
</div>
</body>
</html>
Let’s Write the CSS code for it.
CSS
Here is the CSS Styling code which helps to create sticky Header
* {
margin :0;
padding :0;
}
.header {
margin: 0 auto;
top: 0;
width: 100%;
z-index: 999;
}
If you add position: fixed; the header will be in top to all scrolling. But you might have topbar before that , If you need to Apply the sticky header on scrolling you need to add it when window scrolled. And Next will be the jQuery to apply a custom style while scrolling down.
jQuery
Here is the jQuery code to enable the sticky header when window scrolled.
$(window).scroll(function() { // this will work when your window scrolled.
var height = $(window).scrollTop(); //getting the scrolling height of window
if(height > 100) {
$(".header").css({"position": "fixed"});
} else{
$(".header").css({"position": "relative"});
}
});
That’s it. Let me try to provide a demo for this one. I hope you will get how to make jQuery Simple Sticky Header on Scroll. If you have doubts or queries, please feel free to ask me on my comments tab. Also if you are interested to know more my tutorials and updates follow me on below social sites.
