Original subtitles

Let's implement another pretty common feature

on webpages, which is that the navigation bar

becomes attached to the top of the page

after we scroll to a certain point.

And this is called a sticky navigation.

And so let's build one for our site.

So, the effect that I'm talking about is this one.

So, as we scroll down, once we then reach a certain point,

the menu bar here becomes attached to the top of the page.

And once again, I'm sure that you have seen this

in many pages that you visit.

Now, let's just check out the HTML here,

and just to see how this works.

So, we make this navigation sticky

basically by adding this sticky class

whenever we reach a certain position.

And so this sticky class,

as you can see here on the right side,

all it does is to set the position to fixed

and it also changes the background color

to this transparent.

So, you see that we can actually see through

this navigation a little bit,

which gives it a really cool effect.

Okay.

So, sticky navigation, and to implement this,

we're gonna use the scroll event for now.

So, there's actually a better way of

what we're gonna do in this video,

but let's start by working with the scroll event now

because sometimes that's good to know as well.

So, the scroll event is available on Window.

All right.

So, not document, but really window.addeventlistener

and then scroll.

Okay.

So, this event will be fired off

each time that we scroll on our page.

Okay.

And let's start by taking a look actually at the event,

just so you see that it actually fires

each time that I'm scrolling.

So, I just scroll this little bit

and it already created all of these events.

So, it fired all these times.

So, to scroll event is not really efficient

and usually it should be avoided.

But again for now, let's use that.

And now let's start by getting our current scroll position.

So, let's use window.scrolly,

just as we learned before.

And so this scroll position here

is really on the Window object and not at the event.

So, in the scroll event,

this event object here is actually pretty useless.

We don't even need it here.

Okay.

So, let's just reload here.

And so as we scroll,

you see that each time the event is fired,

we get to the current scroll position.

And remember that this is the position basically,

from the point in the view port.

So, this point here to the very top of the page.

And that's why in the beginning we start at zero

because now the visible part of the site

is exactly also at the top of the page.

Okay.

So, remember to make the navigation sticky,

we will add that sticky class that I showed you earlier.

But now the question is, when exactly should

the navigation actually become sticky?

Well, it should happen here as soon as we reach

the first section.

So, basically as soon as we reach this position.

So, this line here marks the beginning of the first section.

And so when we reached this position,

we want to make the navigation sticky.

Now, of course, we're not gonna like hard coat

the value here.

So, I could take like 565, but that doesn't work

because the size of this element that comes before

is actually dependent on the view port size.

So, if I do this, then you see that

the first section starts way earlier, so like at 300.

And so we cannot hard coat to value

and therefore we need to calculate it dynamically.

So, how do we do that?

Well, remember that we can determine the position actually,

of this first section.

So, let's do that.

And I think I already have it selected up here.

Yeah.

So, section one, which is this one.

So, we need to do this outside, actually,

of this event handler.

So, that's sectionone.getboundingclientwreckedremember.

And so let's call this initial coordinates, so just coards.

And take a look at it.

And so now we get this current top value here,

where is it?

Ah, right here.

So, we get to current top value of the section.

And so we can now work with that

and it's even better if we do this

when scrolled to the top, because then, basically,

this top position here is all the way

from the top of the page all the way here.

So, all the way to the beginning of that first section.

Okay.

And so let's now use this value to add our sticky class.

So, we can say that whenever the window.scroll position

and Y is greater than the initial coordinates at the top,

then we want to add this sticky class.

Right.

And if not, then we want to remove it.

So, I can use nav here because I already

selected it in the previous lecture.

So nav is of course, this entire navigation bar

that we also work with in the previous lecture.

So, remove here

and here, indeed, we need a new line.

And so now that works.

And so let's check this here

and wait for it.

And indeed, now it's here.

So, now the sticky class was added

because we reached the position in the page

which is greater than the distance

of this first section from the top.

All right.

So, this works just fine now, but as I mentioned before,

this is pretty bad for performance.

So, using the scroll event for performing a certain action

at a certain position of the page

is really not the way to go.

And again, that's because the scroll event here

fires all the time, no matter how small

the change is here in the scroll.

And so that makes for a pretty bad performance

and especially on mobile.

Like on the modern computer, of course,

you're not gonna notice anything,

but if you're using this page maybe on an older smartphone,

then it's not gonna be so nice.

All right.

And so in the next video, we're gonna look at a better

and way more efficient tool,

which is the intersection of server API.