Sigma Scripts
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tools
    • 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
  • Tools
    • Custom Post type generator
    • SEO tools
No Result
View All Result
Sigma Scripts
No Result
View All Result

How to fix header on scroll

Abhishek Bhardwaj by Abhishek Bhardwaj
April 15, 2022
in Javascript, Jquery
0 0
0
How to fix header on scroll
0
SHARES
1
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.

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 redirect in PHP

How To Redirect To Another Page In PHP

May 26, 2022
how to start blogging

How to start Blogging in WordPress for free in 2022

May 18, 2022
Top 3 best wordpress theme for blogging

Top 7 best themes for wordpress

May 20, 2022
email marketing services

5 Best Email Marketing Services for Small Business in 2022

April 4, 2022
5 SEO tips to Improve Organic Search Rankings

5 SEO tips to Improve Organic Search Ranking easily.

March 24, 2022
how to delete posts by post meta

how to delete posts by post meta in WordPress

March 17, 2022
Sigma scripts

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Tags

best themes for wordpress create CPT in wordpress create custom post type without plugin fixed header fixed header on scroll google web stories how to create custom post type in wordpress importance of website jquery js seo tips seo tips to improve organic search ranking why website is important for your business wordpress wordpress core wordpress fixed header

Stay Connected

  • News
  • Technology
  • Gadget
  • Design

© 2022 sigmascripts.com

No Result
View All Result
  • Marketing
    • Digital marketing
    • Seo
    • website
  • Javascript
    • Jquery
  • PHP
  • WordPress
    • wordpress plugin
    • wordpress themes
  • Tools
    • 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