Header animat on scroll window

In acest scurt articol vreau sa va arat cum am realizat cu aceste coduri simple dar eficiente un header animat atunci cand dai de scroll in jos pe un site. In primul rand identifici care sunt clasele din partea de sus a site-ului care doresti sa le fixezi la ascroll on window. Deasupra acestor clase se pune un id cu orice nume doriti, eu am ales sa il numesc fixed.

Exemplu:

Pentru partea de jQuery am folosit urmatoarele coduri (trebuie incarca in site libraria jQuery):

Pentru partea de animatie sa realizat urmatoarea declaratie: animation: smoothScroll 1s forwards;

Partea finala de css arata asa:

Daca aveti nelamuriri puteti intreba in sectiunea de comentarii.

Demo

Lasă un răspuns

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

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.