Animatie pentru Sticky Header

Salutare. In acest articol vom invata cum se adauga efectul de animatie pentru Sticky Header. Practic ce ne dorim este ca in momentul cand user-ul da scrol pe pagina partea de sus Header-ul sa coboare cu un mic efect de slide-in. Pentru a realiza acest efect sunt necesare urmatoarele coduri.

Vom folosi libraria jQuery si vom adauga urmatorele coduri in Footer.

jQuery(document).ready(function() {
 jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > 100) {
          jQuery('#masthead').addClass('fixed');
        } else {
          jQuery('#masthead').removeClass('fixed');
        }
        
    if (jQuery(this).scrollTop() > 200) {
          jQuery('#masthead').addClass('inView');
        } else {
          jQuery('#masthead').removeClass('inView');
        }
        
      });
});

De mentionat ca trebuie indentificat id-ul (in cazul din demo este #masthead) sau clasa la care se adauga o alta clasa in cazul nostru fixed.

Urmatoarele coduri sunt pentru CSS

.fixed{
    position: fixed!important;
    z-index: 9999;
    margin: 0 auto;
    width: 100%;
    top: 0;
    background: #2ecc71;
    transform: translate(0, -200px);	
}
.inView{
   transform: translate(0,0);
   transition: all .5s ease;
}

Codurile se pot implementa si intr-o tema WordPress fara probleme.

DEMO