So I could say, if it has a class of, how about, isFloating, in that case, we'll set the position to sticky, and then we will lock it to the top. Okay, so now, if I refresh the page, and if I manually add that, you'll see it does show up. But notice it's kind of jarring. It instantly shows itself. Instead, let's make it slide down in the same way that it works for Laravel. So again, scroll down, and it slides down pretty quickly. Okay, so we can use animations for this. I will say, let's run an animation.

Okay, so we can use animations for this. I will say, let's run an animation. We'll call it slideNavDown, and to start, I'm going to do it very slowly. But when we're done, I find usually about a third of a second is a good number. But yeah, to start, I really want you to see it, so we'll do it very slowly. All right, next, let's set up the keyframes for that. It's called slideNavDown. Now, a quick note here. I'm doing this all inline, but even though this is relatively old, it's still also relatively new syntax.

You can pick anything you want, but when we intersect, whatever you provide will trigger a callback function. So here's what we'll do. At the very bottom of the page, again, this might be part of your JavaScript file. It could be in a view component, whatever you want. But I'm going to instantiate a new IntersectionObserver. And this will accept an array of entries, things that have been intersected or that match the intersection. So we'll just start by console.logging the entries. And now we have our observer.

So we'll just start by console.logging the entries. And now we have our observer. However, we haven't told it what to observe yet. All right, observer.observe, and what is the trigger? What is the thing we want to detect an intersection for? Well here's that more section. That's what begins this green area here. So I'm going to give that an ID, or I already have. We'll give it an ID of featured, and that's what we will pay attention to. document.querySelector(featured).

We'll give it an ID of featured, and that's what we will pay attention to. Document.querySelector(featured). Okay, so observe that featured section, and when we intersect that block in the viewport, trigger this callback function here. Okay, let's come back to Firefox. I'll scroll to the top, and if I open up the console here, you'll see we instantly trigger that callback. And that's because at the moment, have we intersected? Have we crossed that threshold for the featured section? If you take a look at it, intersection ratio is zero.

Okay, so now notice this time, it's not going to fire immediately once we get to this section. We have to get down a little bit further. There we go. And now, and only then, do we run that callback. And notice at this point, we have hit 25% for the intersection ratio. Okay, so at this point, think about it. You can do anything you want. You want it to be fairly lean, so don't do anything too intensive. But often you will apply a class. So we could say, look in the entries array.

But often you will apply a class. So we could say, look in the entries array. We're only working with that first one, but presumably you could have multiple. And you could check if it's intersecting, but in our case, I often will check the ratio instead. So we'll say, for example, if the ratio is greater than or equal to 0.25, in that case, we could say alert intersection, otherwise alert, and that will be considered no intersection. So if it's zero or even 10%, we're not going to consider that an intersection yet. All right, so now if we come back and refresh, it immediately runs. There's no intersection, which means I can't see that featured section.

All right, so now if we come back and refresh, it immediately runs. There's no intersection, which means I can't see that featured section. But once we cross that threshold, it runs again, and now there is an intersection. But if I leave, now there's back to no intersection. So now we have this toggle we can use, and in this case, that toggle will be adding a class or removing a class to and from the nav bar. All right, let's say, what's our nav here? Looks like a simple nav. Okay, let's just say to start, document.querySelector, find the nav, and then let's add a class to it.