Intersection Observer API - A Quickstart

Опубликовано: 06 Март 2025
на канале: Benjamin Carlson

1,907

Learn how to use the Intersection Observer API with an example. We create a sidebar which adds an active class to the active section header. The active section is determined by using the Intersection Observer API! I explain every aspect of the api so you can modify it for your needs. In this video, we use Next.js but any framework (or no framework) will work. You will just have to modify the code a little.

Docs: https://developer.mozilla.org/en-US/d...

0:00 Demo
0:13 Intersection Observer API Explanation
0:51 Starter Code Overview
2:45 Intersection Observer API Options
4:30 Intersection Observer API Targets
5:25 Intersection Observer API
7:27 Viewing Console
8:33 Active Header
9:16 Testing

coffeeclass.io
☕ Want to learn to code for free? Check out https://www.coffeeclass.io?utm_source=youtube&utm_campaign=video for programming tutorials and snippets. Sharpen your skills with coffeeclass.io Learn! Read the article version of my YouTube videos!

My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - https://amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - https://amzn.to/3wddJHL
🖥️ Monitor - Samsung CF390 Series - https://amzn.to/3pDc9fO

My Camera Gear:
📹 Camera - Canon EOS M50 - https://amzn.to/3ixAZfq
🔭 Awesome Camera Lens - Sigma (16mm / f1.4) - https://amzn.to/3pH1K2B
🎤 Microphone - Blue Yeti - https://amzn.to/2TdXLyq
💡 Lights - Neewer LED Lights - https://amzn.to/3gbm6ht

My Favorite Software:
📽️ Final Cut Pro - https://www.apple.com/final-cut-pro/
❗ Student Discount For FCP - https://www.apple.com/us-hed/shop/pro...
🚀 VSCode - https://code.visualstudio.com/

View All My Gear - https://benjamincarlson.io/gear

Support Me:
👨🏼‍💼 Join this channel to get access to perks -    / @benjamincarlson
💸 Sponsor me on GitHub - https://github.com/sponsors/bjcarlson42

Who Am I?
I’m Benjamin Carlson, a developer, student, and YouTube creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (https://coffeeclass.io) that complements this YouTube channel. Finally, I have a newsletter (https://buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.

Connect With Me:
📧 Email - [email protected]
🚅 Website - https://benjamincarlson.io
🐦 Twitter -   / bjmncrlsn
🚀 Github: https://github.com/bjcarlson42
💼 LinkedIn -   / bjcarlson42
✍️ Medium -   / benjamincarlson
📓 Newsletter - https://buttondown.email/benjamincarlson

If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!

Disclaimer: Some of the above links are affiliate links. This means I may receive a small commission at no expense to you. This allows me to continue to post videos like this one!

#mdn #IntersectionObserverAPI