Hide Header on Scroll Down and Show on Scroll Up

Hide Header on Scroll Down Show on Scroll Up

When we browse different websites there are some sites which hide their Header when scrolling down. Here header means the upper section of that website which contains navigation links, logo, etc. Then this header section shows again when we scroll up. This feature is becoming increasingly popular for enhancing user experience and to give minimal distraction to website visitors. Today we are sharing a JavaScript snippet titled 'Hide Header on Scroll Down and Show on Scroll Up' made with vanilla JavaScript. We have shared the video tutorial about this topic for your convenience. If you want to follow the video tutorial and code along, you can do so by watching the video tutorial below.

Video Tutorial:

We hope you have watched the video tutorial. Today's featured JavaScript snippet is a website design pattern where a website's header disappears as the user scrolls down the page but reappears when they start scrolling again. The main purpose of this feature is to make more screen space available for content. Since the header disappears when scrolling down, users can focus more on the content they are consuming. The header appears without having to scroll all the way back up, allowing easy access to essential navigation elements.

Websites that require minimal distractions and prioritize content use this feature. Some of these websites are News websites or blogs, E-commerce platforms, Portfolio websites, etc. Some of the advantages that you get if you implement this feature on your website are Quick access to navigation, Increased screen space, Reduced distractions, Enhanced user experience, etc. We used vanilla JavaScript in addition to HTML CSS to create this snippet. We all know that vanilla JavaScript is plain, unmodified JavaScript that doesn't require frameworks or libraries. Lightweight designs made with vanilla JavaScript lead to quicker load times and improved performance. High-profile websites like Medium, Amazon, The Verge, etc. use this feature to improve the browsing experience of their users.

You May Also like:

Hide Header on Scroll Down and Show on Scroll Up [ Source Code ]:

To create today's javascript snippet on 'Hide Header on Scroll Down and Show on Scroll Up', after creating the HTML and CSS files, you first need to create another file that will contain the vanilla javascript code. The entire process is shown in the video tutorial above. After that, Copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any problems. If the problem persists, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide header on scroll down show on scroll up</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <nav id="navbar">
        <div class="navbar-container">
          <div class="logo">
            <img src="logo.png" alt="Logo">
          </div>
          <ul class="nav-items">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
    </nav>

    <div class="banner"></div>
      
    <div id="content">
      <h1>Welcome to our website</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sequi ducimus, et excepturi magnam enim consequuntur aliquid quaerat praesentium ut nisi, tenetur nihil. Exercitationem sint eligendi veniam. Est, inventore debitis. Exercitationem veniam aliquam nisi accusantium ipsam fugiat expedita libero aspernatur vitae animi eos eveniet porro nesciunt unde illo eum ad, nobis perspiciatis ipsa est numquam magnam nemo fuga. Incidunt omnis nulla delectus perferendis molestias magni iure ipsum nesciunt suscipit voluptatum doloribus iste, laboriosam id dolore sint quasi natus quis dolorum eveniet. Dolorem aliquid delectus, laborum commodi placeat aspernatur eveniet, repellendus asperiores perferendis cumque illo dolor facilis obcaecati. Exercitationem, beatae. Repudiandae repellat deserunt deleniti obcaecati perspiciatis atque, alias labore! Explicabo similique natus, libero excepturi perspiciatis neque eaque eos corrupti id accusamus quo fuga earum beatae architecto saepe fugit optio illum incidunt provident. Similique ipsa voluptates deleniti sapiente, ipsam totam, dolorum, nesciunt ea atque fugiat harum quae accusamus in? Dignissimos necessitatibus illo dolorum exercitationem ipsum magnam hic ea expedita vitae suscipit quo vero officiis deleniti, illum voluptates odit non omnis incidunt nostrum neque consequatur doloremque obcaecati earum. Rem officia quod veniam ad quaerat. Inventore error quam ducimus numquam magnam cumque rerum ea adipisci, neque alias maiores nulla, atque maxime officia in optio? Id alias illo dolorum, fugiat enim asperiores quae! Adipisci sapiente neque consequatur omnis explicabo accusamus, eveniet, animi culpa veritatis, sint saepe perferendis aut facere cumque! Assumenda, quod. Enim adipisci possimus optio rem quidem nostrum rerum, error ad aspernatur quos quis minima iusto illum dolor molestias provident, recusandae sapiente. Dignissimos dolore voluptas exercitationem similique nam quam placeat magni cumque voluptatibus debitis explicabo culpa aspernatur, suscipit beatae consequatur ullam, tempora sapiente incidunt. Odit id odio adipisci ex officia aliquam ab aut pariatur recusandae itaque nam nostrum dolorum iste consectetur nulla consequuntur animi, eligendi esse. Qui omnis consequatur nisi repellat, delectus repellendus laudantium temporibus doloremque natus earum cupiditate, aperiam ullam iusto veritatis impedit corporis consequuntur? Dolorum, consectetur a. Excepturi, dignissimos minus! Eum necessitatibus tempora aliquid architecto dolor numquam quas officiis eligendi hic, consectetur perspiciatis fuga odit repudiandae veniam iusto repellat, nulla voluptas, soluta quibusdam ad est in quia magni? Neque ut sapiente voluptatum illum veritatis fugiat repellendus ullam atque quos maiores quo repudiandae, omnis sit, suscipit quae, laboriosam aperiam quam distinctio exercitationem. Porro quia nostrum odit quibusdam deleniti ad omnis maiores, magni doloremque reiciendis, dolor culpa. Ipsum quidem soluta adipisci quas repellendus ex eos! Aliquam ipsum mollitia ut eum ad quasi similique, repudiandae laborum suscipit eius voluptate enim dolor quis rerum consectetur laudantium! Quidem quibusdam ipsum explicabo quia sequi exercitationem, nobis, eligendi porro esse autem error necessitatibus beatae aliquam. Voluptatum atque rerum sint porro cum rem odio autem culpa quae, nam libero voluptate dicta odit natus quos? Cum quod libero ut quidem ipsum nulla, tempora impedit, iste, tenetur expedita eligendi dolore. Unde aliquam et pariatur cumque quae voluptatibus. Non tempora quam architecto eos veniam quo fuga, soluta, cupiditate provident at placeat similique delectus eveniet voluptate minima magnam reiciendis eaque! Corporis sequi quia sint ad consequatur nemo placeat accusantium tempore quae, accusamus dicta repellendus ipsa at harum eligendi unde doloremque! Id aspernatur qui tenetur doloremque fugit distinctio ipsa praesentium harum consequatur? Sed, quis mollitia enim numquam recusandae, at facere veritatis in excepturi exercitationem repudiandae architecto harum delectus ipsa, ab minima corrupti velit ea sapiente! Debitis delectus, sit quam recusandae maxime facere explicabo officiis eius impedit illo ex laudantium tenetur suscipit pariatur vitae fugit iste nulla voluptas! Odit, molestiae dolore. Consectetur magnam dicta quam facere cupiditate voluptatem. Vel aliquam nulla velit corrupti consectetur laudantium, atque nobis quibusdam, cumque nisi praesentium harum, quod quidem fugiat perferendis eum optio iure cupiditate voluptas officia recusandae? Iure suscipit dolor molestiae accusamus minima voluptatum, incidunt dolorem necessitatibus, exercitationem beatae consectetur nostrum nihil recusandae odit sed, quas laudantium perspiciatis distinctio? Ab officia pariatur iusto dicta distinctio provident inventore ullam, vel debitis aut aliquid? Alias culpa dolorum omnis qui, perspiciatis sint animi ipsam illo aut laboriosam nisi exercitationem beatae maxime quidem rerum ratione tempore fugit doloremque reprehenderit neque quisquam odit laborum rem et. Nihil molestias, beatae alias nam eum maiores nobis quo soluta esse ipsa atque recusandae voluptate optio sint error totam, dolor suscipit aliquam perspiciatis. Quo mollitia, at necessitatibus repellendus tenetur illo facilis ad porro, delectus corporis inventore nesciunt reprehenderit accusamus est ipsum quaerat officia perferendis iusto. Facere illum labore esse quos omnis, non eius doloremque adipisci reiciendis distinctio nisi odit maxime optio quam pariatur dignissimos provident repellat debitis eveniet inventore? Iusto a deleniti exercitationem sed, iste officiis incidunt, similique nesciunt dolorem, quod voluptatibus provident pariatur at nulla ex expedita dolorum sunt dignissimos ea error voluptatum. Voluptatum ratione totam eum voluptates sequi eligendi quia quas aperiam nisi sapiente ad ea corrupti, commodi tenetur dolorem repellendus nostrum, quae placeat. Nemo veritatis suscipit, harum voluptas blanditiis unde ex iure magnam itaque alias, sunt enim, repudiandae fuga amet iste consequatur ullam sequi assumenda eaque eum minima? Illo libero sequi aliquid eius ea, impedit eum. Pariatur laborum ad rem ratione illo culpa voluptatem quidem soluta mollitia similique ducimus eligendi explicabo assumenda iusto, asperiores, eum molestias ipsum qui sint, sunt nobis velit maiores. Et fuga quasi debitis, laboriosam minima commodi itaque pariatur aliquid velit placeat dignissimos error eaque dolore soluta veritatis expedita sit eum, aliquam distinctio at ipsa! Aperiam, sunt! Atque ipsa ratione labore optio iure, quaerat culpa aut repudiandae sit aliquam fugit modi maxime rerum architecto delectus facere ipsam nobis. Ad eum autem rem repudiandae corrupti nam quam sit tenetur veniam ipsa. Culpa nemo ipsam tenetur vero voluptatum error rerum, magnam ipsum recusandae? Sunt voluptates nisi provident, totam alias enim voluptatibus hic iste ratione quae aspernatur quos autem laborum veniam nesciunt, omnis quibusdam debitis dolorum ipsam possimus nemo magnam numquam ut? Blanditiis eligendi alias ullam! Eaque sapiente commodi culpa temporibus veniam maxime? Expedita libero fuga consequatur asperiores ullam eius laborum odit sint cumque tenetur totam fugiat, ex, similique laudantium minima aliquam cum dolore ad reiciendis sapiente placeat. Temporibus repudiandae fugiat officiis rerum! Voluptatibus repellendus odit beatae officia hic iure, delectus, molestiae obcaecati harum rem nam. Vitae esse animi ullam officia consectetur libero odit laboriosam quo.</p>
    </div>

    <script>
      let prevScrollpos = window.pageYOffset;
const navbar = document.getElementById("navbar");  

window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    navbar.style.top = "0";
  } else {
    navbar.style.top = `-${navbar.offsetHeight}px`;
  }
  prevScrollpos = currentScrollPos;
};
    </script>
</body>
</html>

ADD CSS:

body {
  margin: 0; 
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background: #091b29;
}
.banner {
	background: url(2.jpg);
	background-size: cover;
	background-position: center center;
  background-attachment: fixed;
	height: 100vh;
}
nav {
  background-color: #f0f0f0;
  position: fixed;
  width: 100%;
  top: 0;
  transition: top 0.3s;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px;
}

.logo img {
  height: 40px;
}

.nav-items {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-items li {
  margin-left: 20px;
}

.nav-items li a {
  color: #262626;
  text-decoration: none;
  padding: 14px 20px;
  line-height: 70px;
  font-weight: 700;
  transition: font-size .5s ease;
}
.nav-items li a:hover {
	font-size: 12px;
}
#content {
	height: 1500px;
	padding: 80px 80px 0;
	text-align: justify;
  color: #fff;
}
#content h1{
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 80px;
}
#content p{
  line-height: 1.5;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    padding: 10px;
  }

  .logo {
    margin: 15px auto;
  }
  .nav-items li a {
    line-height: 15px;
  }
  
  .nav-items li {
    margin: 0;
  }
  #content {
    padding: 120px 80px 0;
  }
  #content h1 {
    font-size: 50px; 
  }
  
}

@media (max-width: 600px){
  .nav-items li a {
    padding: 14px 7px;
    font-size: 15px;
  }
  #content {
    padding: 120px 15px 0;
    text-align: center;
  }
  #content h1 {
    font-size: 30px;
  }
}

Top Websites utilizing this design pattern to show its effectiveness in enhancing UX across different platforms. If you are designing a blog, an e-commerce site, or a personal portfolio, consider using this design feature to elevate the experience for your users. We hope you have colected the source code. Click the Load More button on our homepage to get these more codes Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Hide Header on Scroll Down and Show on Scroll Up [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Hide Header on Scroll Down and Show on Scroll Up

Video Tutorial:

Hide Header on Scroll Down and Show on Scroll Up [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form