Fixed header - sliding in animation not working

Question

First post here since i'm pretty desperate about this one.
So simple, yet it does .. not .. work!

Here it goes:

I'm trying to add a sliding down animation to my header once i scrolled past a certain point. The problem is that the transition does not work, it just "jumps".

What am I overlooking?

I set up this codepen to keep it as simple as possible to pin down the issue: https://codepen.io/MDVizzy/pen/yLeQRPM

HTML


  THIS REPRESENTS MY HEADER

CSS

.wrapper { 
  height: 3000px; /* TO SIMULATE SCROLLBAR */
  position: relative; 
}
header { 
  background: red; 
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
  color: white;
  position:fixed;
  top: 0px;
  animation: all 3s;
}
header.animation {
  top: 200px;
}

JS

$( document ).ready(function() {
  
  $(window).bind('scroll', function () {
            if ($(window).scrollTop() > 300) {
                
                    $("header").addClass('animation');
                
            } else {
                
                $("header").removeClass('animation');
        
            }
    
        });
  
});

user_5865284 · Answer

You just need to use the transition: ... CSS rule for this code

Using animation: ... requires a linked @keyframes myAnimation { ... } - See Mozilla's examples here

$( document ).ready(function() {
  
  $(window).bind('scroll', function () {
            if ($(window).scrollTop() > 300) {
                
                    $("header").addClass('animation');
                
            } else {
                
                $("header").removeClass('animation');
        
            }
    
        });
  
});

.wrapper { 
  height: 3000px; /* TO SIMULATE SCROLLBAR */
  position: relative; 
}
header { 
  background: red; 
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
  color: white;
  position:fixed;
  top: 0px;
  transition: all 0.3s ease; /* swap with your `animation: ...` rule */
}
header.animation {
  top: 200px;
}



    THIS REPRESENTS MY HEADER

Fixed header - sliding in animation not working

1 Answers