When you have a sticky header or navigation, it’s very common to want to change the background of it, or add a shadow to it, so in this video I look at an easy way to do it with an intersection observer.

🔗 Links
✅ Ryan Mulligan’s article: [ Ссылка ]
✅ More on intersection observers: [ Ссылка ]
✅ More on animating box-shadows: [ Ссылка ]
✅ The code from this video: [ Ссылка ]

⌚ Timestamps
00:00 - Introduction
00:21 - What we’re starting with
01:48 - The JavaScript setup
04:30 - Creating the intersection observer
10:12 - Adding an offset

#css

--

Come hang out with other dev's in my Discord Community
💬 [ Ссылка ]

Keep up to date with everything I'm up to
✉ [ Ссылка ]

Come hang out with me live every Monday on Twitch!
📺 [ Ссылка ]

---

Help support my channel
👨‍🎓 Get a course: [ Ссылка ]
👕 Buy a shirt: [ Ссылка ]
💖 Support me on Patreon: [ Ссылка ]

---

My editor: VS Code - [ Ссылка ]

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: [ Ссылка ]
Codepen: [ Ссылка ]
Github: [ Ссылка ]

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

свернуть