Voiceover: Welcome to part two
of Building a sticky navigation.
In this video we'll use jQuery to make this
sticky navigation work the way want it.
So, in order to do that, we use a simple jQuery plugin
which is called Waypoints.
And Waypoints is an easy way to trigger a function
when we scroll to an element, which is exactly what we want.
So I will start downloading it
and including it in our project.
So here it is.
And extract it
and well, this comes with a bunch of stuff actually
but the file that we want is this one here
jQuery waypoints and the small version.
So I'll copy it
and omnifood
and Vendors because this time it is a JavaScript file
that we got from the internet, it's not our own file.
And actually I think it's time to
delete this old stuff here.
We don't need anymore
and this as well.
Okay so we have a nice, clean folder structure here.
And I'm now going to include this in our project
so that we don't forget it.
So we come down here and I'll put it here.
So as before, script and now it's Vendors js
and here we go.
So our own script is always the last one here.
We need to ensure that this is the last script we call.
So, let's go to the Waypoints website
and take a look at how this works.
So here in jQuery, and this is here the way that we
want to use this.
And here is actually kind of a demo, so we scroll
and then some stuff happens on the website, right.
So I will now go ahead and copy this snippet here
so that we can see how Waypoints should be used with jQuery.
I'll put it here in a comment
and you see the comment in jQuery
are done the exact same way as we do in CSS.
So, how do we want this to work?
Let's go back to our webpage
and the thing is we want this to appear
so we want this sticky navigation to appear each time
we scroll to this element here, right.
So we want it to be hidden here
and we want it to appear once we come to this section.
All right, so the first step is to actually select
this section in jQuery.
So we already know how to do that with this selector,
and now we need a class name such as in CSS.
And now, the section
is this one, and we could go ahead
and just use this class name
but we want a cleaner separation here
between the CSS and the JavaScript,
and the jQuery in this case.
So we don't want to mix up these two things
so we will create a separate class for JavaScript.
So this is much cleaner, and if you have bigger projects
it will become easier to manage this way.
So section and features.
And here we have two dashes, so to separate
this name from this name in a better way.
So I will select this in a script
and actually just close these two, all right.
And now this is where our Waypoint's plugin comes in.
So now we the Waypoints method here
and this is how it works, such as it's down here.
So function and then this function
has an argument called direction.
And what this direction means is that we can actually detect
if the user is scrolling down the webpage
or if he's scrolling up.
And we will take now a decision
based on this parameter here.
So, if you're new to programming,
we have a thing in programming in all major
programming languages which is called the If Construct
and what the If does is very simple.
So if something is true, then a certain thing will happen,
and if it's not true, well then another thing happens.
Now in this case we want to say
if the direction is down,
then something happens and if not,
well then something else happens.
And what do we want to happen?
So if the user scrolls down like this,
we want the sticky navigation to appear.
And if the user scrolls up like this,
then we want this to disappear.
So we select the nav element
and then in jQuery we have this very handy method
and this is actually a jQuery method and had nav
and has nothing to do with Waypoints
and it is add class.
And of course, the class we want to add is sticky.
So I will now remove this from here.
We no longer need this.
So this is the original state.
So, when a user scrolls down,
then this class sticky will be added.
And the other way around, so if the user scrolls up,
then remove the class, remove class sticky.
So I think this should work now.
Here is Waypoint, not Waypoints
and now let's go and check this out.
So this is the normal state, again so this is how
it should look in a normal way, and now this works.
So we scrolled past this place here
which is the beginning of the section,
and then this appears like magic.
This is very cool right.
But we want it even better because you know,
when we come here, now there is no space
between this navigation and this title here.
So you want this to happen a little sooner.
So let's say we want this to happen when we're here
and not only down here.
So we can easily do that here with this extension
and is actually explained down here.
So I'll just copy this and paste it here
so we can specify some offset here
in percent, but I will do it as in pixels,
so let's say 60 pixel, so this will happen 60 pixels
before we hit this section that we defined.
So let's check that as well,
and yeah, so this happens at a cool place
and now from here on this navigation always stays in place.
Now, you saw something strange happen here
which was this one.
So the navigation kind of is behind of the images, right.
So I will have to show you yet one more CSS property
and that is actually also kind of an important one
and it's this, where is it?
We have to say z index, and we set it
to the maximum allowed which is 9999, and the z index
it finds the vertical stacking of elements.
So it's like a stack of elements and now
our sticky navigation will be always at the top.
So this element will be on top of all the other elements
because it has the highest possible value here.
So let's check that out.
So you see right now this is over all the other elements.
So it's always on top.
Great, this is exactly what we want.
Now something weird happened here, I don't know
exactly why this happened.
We lost some space here that we had before,
let me check that.
And yeah, of course, so I have a mistake here.
So this is the way to go.
So now it will be perfect.
So original state, and once again with sticky navigation.
So, very powerful stuff, and we will actually
use this Waypoint plugin later again because it allows us
to make some cool stuff with it.
So I hope you liked this lecture and next stop
we will learn how to actually scroll to the different
sections when we click on these links here.
So stay tuned.