Animate header logo on scroll

Marko Krstić
11 Jul 2022
<div class="header">
  <a href="">
    <img class="brand" src="" alt="">

Important here is that you add class .header to your header and class .brand to your logo.

$(function () {
  var header = $(".header");
  $(window).scroll(function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
    } else {

Code will add new class (.header-alt) to the header to the .header after user scrolls more then 1px. On the line 6 you can change scroll value to what you prefer (50px, 100px, etc).

.brand {
  min-width: 80vw;
  max-height: 400px;
  transition: all ease-in 0.5s;

.header-alt .brand{
   max-height: 50px;
   transition: all ease-in 0.5s;

Add height to your logo before and after scroll. I set it up to 400px and 50px but you can play with values. Also add transition so that you get animation effect.

Codepen Preview

Was this article helpful?



Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy