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

 

Faci un comentariu sau dai un răspuns?

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte articole din aceiasi categorie

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.

    Daca vrei Front-end in general recomand:
    https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/
    https://www.udemy.com/course/advanced-javascript-concepts/
    https://www.udemy.com/course/complete-react-developer-zero-to-mastery/
    Daca vrei doar Javascript recomand:
    https://www.udemy.com/course/the-complete-javascript-course/
    https://www.udemy.com/course/advanced-javascript-concepts/