Sticky Header using HTML CSS & Javascript

byCodingFlicks -October 10, 2020

0

Hello friends, today I sharing another snippet based on Sticky Header using HTML CSS & Javascript. Previously I have shared another snippet on Animated Sticky Header on the scroll. Check out that snippet if you are interested.

Sticky header or navbar is a term we use for navbar that remains fixed on top when visitors scroll down the page. In this snippet of Sticky Header using HTML CSS & Javascript, I used plain HTML CSS and a little javascript code to get the awesome sticky header animation.

In the HTML markup, first, I have taken a header tag. Inside that, I have placed an h1 tag with a random text and some nav item inside a nav tag. after the header tag, I have taken a div item named 'box' and inserted a section with some an h2 title some dummy text under p tag. That's all for the HTML markup.

You may also like:

In the CSS styling, I first removed the default margin padding of the document by providing a margin padding of zero to the universal selector. I used Poppins as the primary font for the project. You can use whatever font you want when you modify the snippet. After that, I did some basic styling for the header. I gave the title a background image and styled the h1 tag to remain in the middle of the banner. I then gave the nav tag an absolute position value and bottom value to stay at the banner's bottom. After that, I did some regular styling for the rest of the projects' elements as well. after that, I styled a particular class named 'sticky' and then used some javascript code to initiate the class style when the visitor scrolls down the webpage.

To create this snippet, make one HTML and CSS file. You will need to add the latest jquery CDN in your project for the snippet to work. Copy, paste, and save the following codes in your project. Run the project in your browser and make the necessary changes according to your needs.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sticky Header using HTML CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
    <h1>banner text</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Portfolio</a>
      <a href="#">Blog</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <div class="box">   

    <section>
      <h2>Section Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae accusamus omnis voluptates ipsam veritatis ut, enim ratione aspernatur maxime velit similique amet doloribus corporis esse. Repellat maiores cum dolorem nostrum, nobis nulla corporis ipsum quos unde quo quis eos esse ipsa sequi, obcaecati libero numquam laboriosam veniam quibusdam architecto omnis ut, possimus quia. Alias voluptatibus nisi vel quos, sequi, fugiat saepe adipisci quasi expedita quibusdam repellendus aliquam, sed deserunt ipsum doloremque, iure molestias recusandae. Doloribus quidem ipsa reprehenderit tenetur sit nesciunt ullam magnam. Voluptatibus recusandae vitae nostrum, necessitatibus doloremque maxime explicabo aut magnam, eaque officia nihil quisquam, atque nulla minus quis sed, asperiores dolorem. Libero, nulla natus. Praesentium porro ad quam inventore fugiat facilis explicabo, a impedit nisi necessitatibus est amet minus ipsam laborum, magnam maxime. Ex, beatae. Eum voluptates tenetur omnis atque esse similique sapiente, necessitatibus quidem officia facere culpa nam cumque, est autem blanditiis quis iste ipsum natus eius et! Laboriosam voluptatibus eum dicta, maiores atque obcaecati nihil iste quia. Molestiae cum asperiores magnam voluptatum in culpa voluptas error illum animi quod ea voluptate ipsa, aliquam sequi tempora cupiditate inventore ex provident esse, nam aperiam totam ipsum eveniet laboriosam! Soluta maiores eos magni, ut explicabo totam ea!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic deserunt error quo enim odit maxime recusandae quas voluptatum, possimus distinctio pariatur magnam adipisci, deleniti ea commodi ex! In ratione quas dicta veritatis cum provident dignissimos excepturi quaerat? Ipsa dolorem aut, beatae amet maiores quasi similique aliquid perferendis corrupti eligendi aspernatur, aperiam sed quaerat facilis nulla suscipit veniam officiis. Debitis laborum labore, nemo voluptatem quasi consequatur, aliquid quidem dignissimos, magnam, iste est ab. Ab quisquam odit excepturi enim laboriosam esse nostrum illo, deserunt quia nam ex quaerat nobis quod at consequatur praesentium optio rem, aut. Odio vero iste inventore, libero molestiae fugiat quibusdam quos aperiam, eveniet ipsa excepturi quaerat vel natus esse. Nobis omnis quisquam, tempore quis itaque cum hic repellendus ipsa placeat officiis voluptates dolore necessitatibus temporibus et dolorum inventore tenetur sapiente totam cumque, accusamus cupiditate quia! Reiciendis animi minima fuga maiores, expedita tenetur asperiores explicabo porro quo doloribus!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic deserunt error quo enim odit maxime recusandae quas voluptatum, possimus distinctio pariatur magnam adipisci, deleniti ea commodi ex! In ratione quas dicta veritatis cum provident dignissimos excepturi quaerat? Ipsa dolorem aut, beatae amet maiores quasi similique aliquid perferendis corrupti eligendi aspernatur, aperiam sed quaerat facilis nulla suscipit veniam officiis. Debitis laborum labore, nemo voluptatem quasi consequatur, aliquid quidem dignissimos, magnam, iste est ab. Ab quisquam odit excepturi enim laboriosam esse nostrum illo, deserunt quia nam ex quaerat nobis quod at consequatur praesentium optio rem, aut. Odio vero iste inventore, libero molestiae fugiat quibusdam quos aperiam, eveniet ipsa excepturi quaerat vel natus esse. Nobis omnis quisquam, tempore quis itaque cum hic repellendus ipsa placeat officiis voluptates dolore necessitatibus temporibus et dolorum inventore tenetur sapiente totam cumque, accusamus cupiditate quia! Reiciendis animi minima fuga maiores, expedita tenetur asperiores explicabo porro quo doloribus!</p>     

    </section>
    
  </div>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script>
$(function(){
  $(window).scroll(function(){
    var navAnimate = $(window).scrollTop();
    if(navAnimate >= 20){
      $("body").addClass("sticky");
    }else{
      $("body").removeClass("sticky");
    }
  });
});
    </script>
</body>
</html>

CSS

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: poppins;
}

header {	
background-image: url(1.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
text-align: center;
position: relative;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
transition: all 0.5s ease;
}
header h1 {
font-size: 120px;
color: #fff;
line-height: 100vh;
text-transform: uppercase;
font-weight: 900;
transition: all 0.3s ease;
letter-spacing: 5px;
}
nav {
position: absolute;
bottom: 0;
height: 60px;
line-height: 60px;
width: 100%;
background-color: #262626;
}
nav a {
color: #fff;
display: inline-block;
padding: 23px 15px;
line-height: 1;
text-decoration: none;
border-radius: 2px;
}
nav a:hover {
background: darkorange;
}
section {
padding: 20px 60px;
margin-bottom: 40px;
background-color: #ddd;
}
section h2 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
line-height: 2;
color: #262626;
text-align: center;
}

section p {
margin-bottom: 25px;
line-height: 2.2;
color: #262626;
}

.box {
width: 1170px;
max-width: 100%;
margin: 0 auto;
}

body.sticky {
padding-top: 200px;
}
body.sticky header {
height: 60px;
}
body.sticky header h1 {
transform: scale(0);
}

I hope you liked this small snippet. To stay connected with this blog, please follow our social media profiles. Thank you for visiting the blog.

Please do not enter any spam link in the comment box.