Sigmascripts
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tips and trick
  • Tools
    • WordPress Custom Post type generator
    • SEO tools
No Result
View All Result
Sigma Scripts
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tips and trick
  • Tools
    • WordPress Custom Post type generator
    • SEO tools
No Result
View All Result
Sigma Scripts
No Result
View All Result

how to make sticky header

Abhishek Bhardwaj by Abhishek Bhardwaj
June 28, 2022
in Javascript, Jquery
0 0
0
how to make sticky header
0
SHARES
32
VIEWS
Share on FacebookShare on Twitter
Table Of Contents
  1. We can create Sticky header with 3 steps
    • 1. Create HTML
    • 2. Create style from css
    • 3. Add Javascript Code

The word “Sticky” Header is a term generally used for header which is fixed at the top even when user scroll down. The sticky header always remain visible. let me show you how to fix header on scroll.

We can create Sticky header with 3 steps

1. Create HTML

Let’s create a html file index.html or header.html. In HTML we will create a div and this DIV is parent for header. All the elements under header we will put under this DIV.

<div id="header" class="big_header"> <p>TalkersCode Sticky Header</p> </div>

2. Create style from css

.big_header
{
top:0px;
position:fixed;
width:100%;
background-color:#084B8A;
color:white;
font-size:40px;
z-index:2;
transition: all 0.3s ease;
}
.sticky_header
{
font-size: 17px;
}

Here We’re are using two classes for header one in .big_header and other is .sticky_header big_header we are using when user doesn’t start scrolling. Once user start scrolling then sticky_header class will add from Javascript. We will see that in next step.

ADVERTISEMENT
ADVERTISEMENT

3. Add Javascript Code

$(window).scroll(function()
 {
 if ($(this).scrollTop() > 1)
 {
 $('#header').addClass("sticky_header");
 }
 else
 {
 $('#header').removeClass("sticky_header");
 }
 });

In this code, We are adding a condition on window.scroll(). When user scroll to more than 1 px this script will add class sticky_header on DIV where DIV is header and Rest our CSS code will do all

You can download this script

Tags: fixed headerfixed header on scrolljqueryjswordpresswordpress fixed header
Next Post

Why website is important for your business in 2022

Abhishek Bhardwaj

Abhishek Bhardwaj

Next Post
Why website is important for your business in 2022

Why website is important for your business in 2022

Leave a Reply Cancel reply

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

You might also like

what is a backlink in seo

What is a Backlink in SEO? How to get Free Backlinks?

August 18, 2022
wordpress duplicate a page

How to Duplicate a Page in WordPress?

August 18, 2022
What should be the first tag in any html document?

What should be the first tag in any HTML document?

August 16, 2022
Google Web stories

What are Google Web Stories? Is it Worth it?

August 15, 2022
What is mongodb?

What is Mongodb atlas? Is this Free to learn?

August 15, 2022
What is python programming language

What is python programming language

August 15, 2022

Grow your online business presence with the best digital marketing strategy offered by Sigmascripts. You will get all about WordPress, digital marketing, SEO, etc. We deliver the best ideas to grow you through the Online platform.

Stay Connected

  • About us
  • Privacy Policy

© 2022 sigmascripts.com

No Result
View All Result
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tips and trick
  • Tools
    • WordPress Custom Post type generator
    • SEO tools

© 2022 sigmascripts.com

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In