I observed your video, sir. And it intersected with me very well. Job well done!

Dude, you content so good! Keep it up! I’ve showed my team at work your channel and even the seniors love you haha

These videos are great. I watch for them every week. On your website, you have a green bar that indicates how far you have scrolled down the page. Can you do a video on that? Thanks!

Amazing! A great use case for this is on a chat to send feedback to the api that the user had read a message.

You have my respect. I recently was looking for a way, not until now, how to change my navbar background color when getting to a particular section of a page, and reverting it back when it crosses that section or goes back up. This is beautiful.

This scroll style is awesome! Great Video, thanks!!

Need more videos like this. Thank you

I've seen sometimes people use onDestroy to disconnect the observer, is it necesary?

i think this is good for my chat application.. I'm thinking about how can i implement a seen messages feature, maybe i can use this. Thanks master 🙏

Can you make a video about vue 3 + astro ?, that seems to be even better than just a plain vue 3 spa + vite

Love your videos. Keep it up man

The logic is flawed here. As you can see, the first and second section is never updated, because they are always in the viewport. What you need to do is only change the id when the header comes into contact with another element at the top of the page (an invisible div or something). That way, the current section will only change when the old section is mostly out of view. EDIT: Turns out you cant have the size of the invisible div set to anything you want since you want the target element's root to be a parent. So, you should use the rootMargin option and add a negative margin that will effectively shrink the intersection area. Say -90% bottom margin, which will leave a 10% area of the vh at the top. (set the height of the root div to 100vh)

how to adjust adjust the intersection observer position and threshold?

I’m sure it’s not recommended, in Vue, to query to the document directly with query selector?

Love your videos🎥

why does using document.querySelectorAll preferred over using ref? Is this only matter of preference?

In the view docs, not only does the active border gets changed, there's also the hash which is updated. How does one accomplish that? There's also a feature whereby once you scroll out of the container containing the id section, the hash disappears. It's a very interesting feature that I'm trying to replicate.

Super helpful, thanks 🙏👍

Is this accessible for users that use the screen reader?

What if the paragraph is much longer let's say longer than the client view height. Then you approach doesn't really work because when you scroll to the section below and then start scrolling up through the very long paragraph (meaning the header is not visible) your TOC still highlights the link to section below even though user came back to read previous very long paragraph. How would we go about this? I have this problem in my app and I cannot get it to work like it works on MDN, tailwind docs or any good documentation. Any tips??

Love your videos

This is awesome Thank you for this 👍

Great video

hi great video, can you implement this using vue components? hope you recognize my comment.

Amazing!

it is not working after changing link and come back to the page again how can we fix it. any idea