Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Responsive Fullscreen Animated Sticky Header using CSS & Vanilla Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
Join Our Channel Membership And Get Source Code of My New Video’s Everyday!
Join :

Source Code :
Facebook Page :
Instagram :
Twitter :
Website :

Buy Me A Coffee :

give proper credit if you repost this on other social media platform
Inspired By This : Full Screen Animated Sticky Header | Sticky Navigation Bar After Scroll with Html CSS and jQuery
image source :

Icon Download Link :
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

Support site by sharing this post

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on reddit
Share on tumblr
Share on stumbleupon
  1. Thank bro it's a really good tutorial. But i have a little bug: when i do a little scroll or when i use the buttons from the browser scrolllbar, the navbar bounce between the 2 classes and get back to the top. Do you have a fix for it ?

  2. Seen from a UX/UI point of view this a great implementation of working with a picture that stands out, which integrates in a functional menu structure. The catchy image isn't important anymore and 'disappears' in the menu bar. Very well done!

  3. vous avez pas mi le code source de cette vidéo parce que je vois pas c'est pas assez gros le code merci d'avance

    you don't have the source code of this video because I don't see it's not big enough the code thank you in advance

  4. I got a question. Why do we have to use three properties( 'display: none' 、'opacity: 0'、' visibility: hidden')? Can we only use a property ( opacity: 0)? Please tell me the different?
    thank you~ really like your Tutorials~^^

Leave a Reply

Your email address will not be published. Required fields are marked *