HDTutorial
EN
How to make an animated sticky header with CSS and JavaScript!

Playback starts YouTube’s embedded player (privacy-enhanced mode).

How to make an animated sticky header with CSS and JavaScript!

27,156 views November 4, 2018 15:21

Watch on YouTube
ChannelCoder Coder

Description from the creator

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/externa…


Build your own website header navigation bar that sticks to the top of the page, and animates as you scroll down the page.

Summary:
Step: Use CSS to make the header sticky.
Step 2: Use JavaScript to detect if the user has scrolled down the page and add a CSS class.
Step 3: Use CSS transitions to make the header animate smoothly on scroll.

Blog post:
coder-coder.com/sticky-header-animated

Source code on GitHub:
github.com/thecodercoder/simple-sticky-header

_____________________________________

FOLLOW CODER CODER:

Blog: coder-coder.com/
Instagram: instagram.com/thecodercoder
Twitter: twitter.com/thecodercoder

_____________________________________

#webdevelopment #html #css #livecoding #learntocode

About this tutorial

Coder Coder published this 15:21 video tutorial on November 4, 2018. It has been watched 27,156 times on YouTube.

Category
Education
Duration
15:21
Published
November 4, 2018
Views
27,156
Likes
546

Tags

Share

This tutorial in other languages