X

Congrats, You are Subscribed to Receive Updates.

jQuery Simple Sticky Header on Scroll


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.

jQuery-Simple-Sticky-Header-on-Scroll

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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts