Voiceover: Welcome to part two 2 2
of Building a sticky navigation. 3 3
In this video we'll use jQuery to make this 4 4
sticky navigation work the way want it. 5 5
So, in order to do that, we use a simple jQuery plugin 6 6
which is called Waypoints. 7 7
And Waypoints is an easy way to trigger a function 8 8
when we scroll to an element, which is exactly what we want. 9 9
So I will start downloading it 10 10
and including it in our project. 11 11
So here it is. 12 12
And extract it 13 13
and well, this comes with a bunch of stuff actually 14 14
but the file that we want is this one here 15 15
jQuery waypoints and the small version. 16 16
So I'll copy it 17 17
and omnifood 18 18
and Vendors because this time it is a JavaScript file 19 19
that we got from the internet, it's not our own file. 20 20
And actually I think it's time to 21 21
delete this old stuff here. 22 22
We don't need anymore 23 23
and this as well. 24 24
Okay so we have a nice, clean folder structure here. 25 25
And I'm now going to include this in our project 26 26
so that we don't forget it. 27 27
So we come down here and I'll put it here. 28 28
So as before, script and now it's Vendors js 29 29
and here we go. 30 30
So our own script is always the last one here. 31 31
We need to ensure that this is the last script we call. 32 32
So, let's go to the Waypoints website 33 33
and take a look at how this works. 34 34
So here in jQuery, and this is here the way that we 35 35
want to use this. 36 36
And here is actually kind of a demo, so we scroll 37 37
and then some stuff happens on the website, right. 38 38
So I will now go ahead and copy this snippet here 39 39
so that we can see how Waypoints should be used with jQuery. 40 40
I'll put it here in a comment 41 41
and you see the comment in jQuery 42 42
are done the exact same way as we do in CSS. 43 43
So, how do we want this to work? 44 44
Let's go back to our webpage 45 45
and the thing is we want this to appear 46 46
so we want this sticky navigation to appear each time 47 47
we scroll to this element here, right. 48 48
So we want it to be hidden here 49 49
and we want it to appear once we come to this section. 50 50
All right, so the first step is to actually select 51 51
this section in jQuery. 52 52
So we already know how to do that with this selector, 53 53
and now we need a class name such as in CSS. 54 54
And now, the section 55 55
is this one, and we could go ahead 56 56
and just use this class name 57 57
but we want a cleaner separation here 58 58
between the CSS and the JavaScript, 59 59
and the jQuery in this case. 60 60
So we don't want to mix up these two things 61 61
so we will create a separate class for JavaScript. 62 62
So this is much cleaner, and if you have bigger projects 63 63
it will become easier to manage this way. 64 64
So section and features. 65 65
And here we have two dashes, so to separate 66 66
this name from this name in a better way. 67 67
So I will select this in a script 68 68
and actually just close these two, all right. 69 69
And now this is where our Waypoint's plugin comes in. 70 70
So now we the Waypoints method here 71 71
and this is how it works, such as it's down here. 72 72
So function and then this function 73 73
has an argument called direction. 74 74
And what this direction means is that we can actually detect 75 75
if the user is scrolling down the webpage 76 76
or if he's scrolling up. 77 77
And we will take now a decision 78 78
based on this parameter here. 79 79
So, if you're new to programming, 80 80
we have a thing in programming in all major 81 81
programming languages which is called the If Construct 82 82
and what the If does is very simple. 83 83
So if something is true, then a certain thing will happen, 84 84
and if it's not true, well then another thing happens. 85 85
Now in this case we want to say 86 86
if the direction is down, 87 87
then something happens and if not, 88 88
well then something else happens. 89 89
And what do we want to happen? 90 90
So if the user scrolls down like this, 91 91
we want the sticky navigation to appear. 92 92
And if the user scrolls up like this, 93 93
then we want this to disappear. 94 94
So we select the nav element 95 95
and then in jQuery we have this very handy method 96 96
and this is actually a jQuery method and had nav 97 97
and has nothing to do with Waypoints 98 98
and it is add class. 99 99
And of course, the class we want to add is sticky. 100 100
So I will now remove this from here. 101 101
We no longer need this. 102 102
So this is the original state. 103 103
So, when a user scrolls down, 104 104
then this class sticky will be added. 105 105
And the other way around, so if the user scrolls up, 106 106
then remove the class, remove class sticky. 107 107
So I think this should work now. 108 108
Here is Waypoint, not Waypoints 109 109
and now let's go and check this out. 110 110
So this is the normal state, again so this is how 111 111
it should look in a normal way, and now this works. 112 112
So we scrolled past this place here 113 113
which is the beginning of the section, 114 114
and then this appears like magic. 115 115
This is very cool right. 116 116
But we want it even better because you know, 117 117
when we come here, now there is no space 118 118
between this navigation and this title here. 119 119
So you want this to happen a little sooner. 120 120
So let's say we want this to happen when we're here 121 121
and not only down here. 122 122
So we can easily do that here with this extension 123 123
and is actually explained down here. 124 124
So I'll just copy this and paste it here 125 125
so we can specify some offset here 126 126
in percent, but I will do it as in pixels, 127 127
so let's say 60 pixel, so this will happen 60 pixels 128 128
before we hit this section that we defined. 129 129
So let's check that as well, 130 130
and yeah, so this happens at a cool place 131 131
and now from here on this navigation always stays in place. 132 132
Now, you saw something strange happen here 133 133
which was this one. 134 134
So the navigation kind of is behind of the images, right. 135 135
So I will have to show you yet one more CSS property 136 136
and that is actually also kind of an important one 137 137
and it's this, where is it? 138 138
We have to say z index, and we set it 139 139
to the maximum allowed which is 9999, and the z index 140 140
it finds the vertical stacking of elements. 141 141
So it's like a stack of elements and now 142 142
our sticky navigation will be always at the top. 143 143
So this element will be on top of all the other elements 144 144
because it has the highest possible value here. 145 145
So let's check that out. 146 146
So you see right now this is over all the other elements. 147 147
So it's always on top. 148 148
Great, this is exactly what we want. 149 149
Now something weird happened here, I don't know 150 150
exactly why this happened. 151 151
We lost some space here that we had before, 152 152
let me check that. 153 153
And yeah, of course, so I have a mistake here. 154 154
So this is the way to go. 155 155
So now it will be perfect. 156 156
So original state, and once again with sticky navigation. 157 157
So, very powerful stuff, and we will actually 158 158
use this Waypoint plugin later again because it allows us 159 159
to make some cool stuff with it. 160 160
So I hope you liked this lecture and next stop 161 161
we will learn how to actually scroll to the different 162 162
sections when we click on these links here. 163 163
So stay tuned.