Header Animation on Scroll with HTML/CSS

Version 1

HTML

<body>
<div class="header">
<div id="header-scroll"> <h1>Header Scroll Effect</h1></div>
</div>
</body>

CSS

<style type="text/css">
.header {
height:800px;

}
#header-sroll {
position:fixed;
height: 100px;
background:#ccc;
left:0;
top:0;
float:left;
width:100%;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#header-sroll h1 {
font-size: 30px;
font-family: Arial;
text-align: center;
line-height: 50px;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#header-sroll.small {
height: 70px;
line-height: 35px;
}
#header-sroll.small h1{
height: 70px;
line-height: 35px;
font-size: 25px;
}
</style>

Jquery / Javascript

<script>
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 0) {
$("#header-scroll").addClass("small")
} else {
$("#header-scroll").removeClass("small")
}
});
</script>

Version 2

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Animated sticky header on scroll in JavaScript - Code Premix</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
    }

    .header {
      padding: 80px;
      text-align: center;
      color: white;
      background-image: url("./images/head-img.jpg");
      background-size: cover;
    }

    .header h1 {
      font-size: 40px;
    }

    .navbar {
      overflow: hidden;
      background: #269faf;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }

    .navbar a.right {
      float: right;
    }

    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }

    .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .side {
      -ms-flex: 30%;
      flex: 30%;
      background-color: #f1f1f1;
      padding: 20px;
    }

    .main {
      -ms-flex: 70%;
      flex: 70%;
      background-color: white;
      padding: 20px;
    }

    .fakeimg {
      width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 4px;
    }

    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
    }

  </style>
</head>

<body>

  <div class="header">
    <h1>Sticky Header Website</h1>
    <p>A website created in HTML</p>
  </div>

  <div id="sticky-header" class="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#" class="right">Login</a>
  </div>

  <div class="row">
    <div class="main">
      <h2>Lorem ipsum dolor sit amet</h2>
      <h5>Arcu dui vivamus arcu felis bibendum</h5>
      <img class="fakeimg" src="./images/img-1.jpg" />
      <p>Excepteur sint occaecat</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ipsum suspendisse ultrices gravida dictum fusce. Mauris pellentesque pulvinar pellentesque
        habitant morbi. Libero id faucibus nisl tincidunt eget nullam non. Rhoncus aenean vel elit scelerisque mauris
        pellentesque pulvinar pellentesque habitant.</p>
      <br>
      <h2>Vivamus arcu felis</h2>
      <h5>Tellus mauris a diam maecenas sed enim</h5>
      <img class="fakeimg" src="./images/img-2.jpg" />
      <p>Ultrices tincidunt</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Augue interdum velit euismod in pellentesque. Vivamus arcu felis bibendum ut tristique et.
        Tincidunt tortor aliquam nulla facilisi cras.</p>
      <br>
      <h2>Purus semper eget duis at tellus at urna</h2>
      <h5>Fermentum leo vel orci porta</h5>
      <img class="fakeimg" src="./images/img-3.jpg" />
      <p>Tristique nulla aliquet</p>
      <p>Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Dapibus ultrices in iaculis nunc sed augue.
        Senectus et netus et malesuada fames ac turpis.</p>
      <br>
      <h2>Fermentum dui faucibus in ornare quam</h2>
      <h5>Viverra nibh cras pulvinar</h5>
      <img class="fakeimg" src="./images/img-4.jpg" />
      <p>Scelerisque mauris pellentesque</p>
      <p>Scelerisque pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Tempor orci eu
        lobortis elementum nibh tellus molestie nunc.</p>
    </div>
    <div class="side">
      <h2>Eget mi proin</h2>
      <h5>Sed libero enim:</h5>
      <img class="fakeimg" src="./images/s-img-1.jpg" />
      <p>Massa tincidunt dui ut ornare lectus sit amet est.</p>
      <h3>Mi ipsum faucibus</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <img class="fakeimg" src="./images/s-img-2.jpg" />
      <h3>Malesuada fames</h3>
      <p>In nisl nisi scelerisque eu ultrices.</p>
      <img class="fakeimg" src="./images/s-img-3.jpg" />
    </div>
  </div>

  <div class="footer">
    <h2>Footer</h2>
  </div>

</body>

</html>

CSS

<style>
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    transition: all 0.5s ease;
    animation: smoothScroll 1s forwards;
  }

  @keyframes smoothScroll {
    0% {
      transform: translateY(-142px);
    }
    100% {
      transform: translateY(0px);
    }
  }
</style>

Javascript

<script>
  var header = document.getElementById("sticky-header");
  var stickyPosition = header.offsetTop + header.offsetHeight;
  window.onscroll = function () {
    if (window.pageYOffset > stickyPosition) {
      header.classList.add("sticky");
      document.querySelectorAll('body')[0].style.marginTop = header.offsetHeight + "px";
    } else {
      header.classList.remove("sticky");
      document.querySelectorAll('body')[0].style.marginTop = "0px";
    }
  };
</script>

Leave a Comment