Hide or Reveal a Sticky Header on Scroll

In this blog, we will share another simple yet interesting snippet about the sticky navigation bar. This project is about how to hide or reveal a sticky header on a scroll. If you want to understand the source code better, you need to go through the following video tutorial. There are lots of videos on our YouTube Channel. You can subscribe to our channel if you find some of our videos useful.

I hope you have watched the video tutorial. Sticky header menus or navigation bars are also called fixed headers, which cause the header of a website to remain at the top of the page as a user scrolls up and down. One of the easiest ways to make a sticky header is to use the CSS position: sticky. But We have used some custom js code to make the sticky header hide on scroll down and reveal on scroll up.

You may also like:

Hide or Reveal a Sticky Header on Scroll [ Source Code ]:

To create this snippet you have to create two files. One is CSS file with .css extension and an HTML file with a .html extension. You can add a separate js file to put the js script in it. For this project, we kept it underneath the HTML file. Connect the External CSS file with the HTML file. Copy the code provided below and paste them into your project. Check the snippet on your browser and if it not working then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>How to Hide or Reveal a Sticky Header on Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="cusNav">
        <div class="single-navs">
            <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#" class="logo">Morphic</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
        </div>
    </header>
    <main>
        <div class="content">
            <h2>Creative Agency</h2>
            <h3>We Provide Best Consultancy Advise</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ab.</p>
            <a href="#">Learn More</a>
        </div>
    </main>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        
var A;
var B = 0;
var C = 5;
var heightArea = $('header').outerHeight();

$(window).scroll(function(event){
    A = true;
});

setInterval(function() {
    if (A) {
        hasScrolled();
        A = false;
    }
}, 250);

function hasScrolled() {
    var D = $(this).scrollTop();
    if(Math.abs(B - D) <= C)
        return;
    
    if (D > B && D > heightArea){
        // Scroll Down
        $('header').removeClass('cusNav').addClass('upAni');
    } else {
        // Scroll Up
        if(D + $(window).height() < $(document).height()) {
            $('header').removeClass('upAni').addClass('cusNav');
        }
    }
    
    B = D;
}
    </script>
</body>
</html>

ADD CSS:

body {
	padding-top: 40px;
}
header {
	background: deepskyblue;
	height: 50px;
	position: fixed;
	top: 0;
	transition: top 0.2s ease-in-out;
	width: 99%;
}
.single-navs a {
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-family: montserrat;
	margin: 0 20px;
	line-height: 2.5;
	font-weight: 700;
	font-size: 20px;
}
.single-navs {
	text-align: center;
}
.logo {
	font-family: alfa slab one !important;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.upAni {
	top: -50px;
}
main {
	height: 100vh;
	display: grid;
	place-items: center;
}
.content {
	text-align: center;
}
.content h2 {
	font-family: alfa slab one;
	font-size: 60px;
	margin: 0;
	color: deepskyblue;
}
.content h3 {
	margin: 0;
}
.content a {
	text-decoration: none;
	background: deepskyblue;
	color: #fff;
	padding: 15px 35px;
	display: inline-block;
	border-radius: 50px;
}

I hope you have implemented the code correctly. On our website, there is a lot of information related to front-end development. Clicking on the Load More button on the home page will allow you to explore them. You can share what you see on the website with other people if you like what you see. It is possible to help others learn by learning yourself. We want to express our gratitude for your visit to our website.

DOWNLOAD CODE

Hide or Reveal a Sticky Header on Scroll [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Hide or Reveal a Sticky Header on Scroll

Hide or Reveal a Sticky Header on Scroll [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form