Instructor: 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.