Sigmascripts
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Seo Tools
    • keyword suggestion tool
    • plagiarism checker
    • WordPress Custom Post type generator
    • Backlink Maker
    • SItemap Generator
    • Domain age checker
    • Page size checker
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tips and trick
No Result
View All Result
Sigma Scripts
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Seo Tools
    • keyword suggestion tool
    • plagiarism checker
    • WordPress Custom Post type generator
    • Backlink Maker
    • SItemap Generator
    • Domain age checker
    • Page size checker
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tips and trick
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
101
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

How to make money blogging for beginners

How to make money blogging for beginners

March 8, 2023
What is Chat GPT?

What is Chat GPT ? What is Chat GPT used for?

February 24, 2023
programming languages

Best Programming Language For Web Development

October 19, 2022
on-page and off-page seo

On-page and Off-page SEO most Essential Factors 

October 14, 2022
copywriting

A Complete Guide of Freelance Copywriting

October 10, 2022
seo keywords

What are SEO Keywords? Types of SEO Keywords

September 28, 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
  • Seo Tools
    • keyword suggestion tool
    • plagiarism checker
    • WordPress Custom Post type generator
    • Backlink Maker
    • SItemap Generator
    • Domain age checker
    • Page size checker
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tips and trick

© 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