1 00:00:01,412 --> 00:00:02,864 Welcome to part two 2 00:00:02,864 --> 00:00:05,105 of Building a sticky navigation. 3 00:00:05,105 --> 00:00:08,309 In this video we'll use jQuery to make this 4 00:00:08,309 --> 00:00:11,559 sticky navigation work the way want it. 5 00:00:12,628 --> 00:00:17,202 So, in order to do that, we use a simple jQuery plugin 6 00:00:17,202 --> 00:00:18,886 which is called Waypoints. 7 00:00:18,886 --> 00:00:22,589 And Waypoints is an easy way to trigger a function 8 00:00:22,589 --> 00:00:26,756 when we scroll to an element, which is exactly what we want. 9 00:00:28,023 --> 00:00:31,308 So I will start downloading it 10 00:00:31,308 --> 00:00:33,975 and including it in our project. 11 00:00:38,030 --> 00:00:39,197 So here it is. 12 00:00:41,548 --> 00:00:42,715 And extract it 13 00:00:47,110 --> 00:00:51,277 and well, this comes with a bunch of stuff actually 14 00:00:52,346 --> 00:00:55,034 but the file that we want is this one here 15 00:00:55,034 --> 00:00:58,284 jQuery waypoints and the small version. 16 00:00:59,834 --> 00:01:01,084 So I'll copy it 17 00:01:05,001 --> 00:01:06,001 and omnifood 18 00:01:07,949 --> 00:01:11,792 and Vendors because this time it is a JavaScript file 19 00:01:11,792 --> 00:01:16,773 that we got from the internet, it's not our own file. 20 00:01:16,773 --> 00:01:19,081 And actually I think it's time to 21 00:01:19,081 --> 00:01:21,614 delete this old stuff here. 22 00:01:21,614 --> 00:01:23,364 We don't need anymore 23 00:01:24,882 --> 00:01:27,065 and this as well. 24 00:01:27,065 --> 00:01:31,929 Okay so we have a nice, clean folder structure here. 25 00:01:31,929 --> 00:01:35,993 And I'm now going to include this in our project 26 00:01:35,993 --> 00:01:38,594 so that we don't forget it. 27 00:01:38,594 --> 00:01:42,094 So we come down here and I'll put it here. 28 00:01:46,396 --> 00:01:50,063 So as before, script and now it's Vendors js 29 00:01:51,145 --> 00:01:52,591 and here we go. 30 00:01:52,591 --> 00:01:56,446 So our own script is always the last one here. 31 00:01:56,446 --> 00:02:00,613 We need to ensure that this is the last script we call. 32 00:02:02,402 --> 00:02:05,316 So, let's go to the Waypoints website 33 00:02:05,316 --> 00:02:08,149 and take a look at how this works. 34 00:02:09,716 --> 00:02:13,883 So here in jQuery, and this is here the way that we 35 00:02:14,896 --> 00:02:16,069 want to use this. 36 00:02:16,069 --> 00:02:18,391 And here is actually kind of a demo, so we scroll 37 00:02:18,391 --> 00:02:22,558 and then some stuff happens on the website, right. 38 00:02:23,696 --> 00:02:26,715 So I will now go ahead and copy this snippet here 39 00:02:26,715 --> 00:02:30,882 so that we can see how Waypoints should be used with jQuery. 40 00:02:34,413 --> 00:02:37,652 I'll put it here in a comment 41 00:02:37,652 --> 00:02:41,112 and you see the comment in jQuery 42 00:02:41,112 --> 00:02:44,779 are done the exact same way as we do in CSS. 43 00:02:47,253 --> 00:02:49,920 So, how do we want this to work? 44 00:02:51,154 --> 00:02:53,453 Let's go back to our webpage 45 00:02:53,453 --> 00:02:57,191 and the thing is we want this to appear 46 00:02:57,191 --> 00:03:02,091 so we want this sticky navigation to appear each time 47 00:03:02,091 --> 00:03:05,258 we scroll to this element here, right. 48 00:03:07,408 --> 00:03:09,637 So we want it to be hidden here 49 00:03:09,637 --> 00:03:14,548 and we want it to appear once we come to this section. 50 00:03:14,548 --> 00:03:17,230 All right, so the first step is to actually select 51 00:03:17,230 --> 00:03:19,147 this section in jQuery. 52 00:03:20,887 --> 00:03:25,717 So we already know how to do that with this selector, 53 00:03:25,717 --> 00:03:29,384 and now we need a class name such as in CSS. 54 00:03:30,814 --> 00:03:32,481 And now, the section 55 00:03:35,667 --> 00:03:39,092 is this one, and we could go ahead 56 00:03:39,092 --> 00:03:41,809 and just use this class name 57 00:03:41,809 --> 00:03:44,816 but we want a cleaner separation here 58 00:03:44,816 --> 00:03:47,733 between the CSS and the JavaScript, 59 00:03:48,600 --> 00:03:50,017 and the jQuery in this case. 60 00:03:50,017 --> 00:03:53,395 So we don't want to mix up these two things 61 00:03:53,395 --> 00:03:57,562 so we will create a separate class for JavaScript. 62 00:03:58,422 --> 00:04:01,998 So this is much cleaner, and if you have bigger projects 63 00:04:01,998 --> 00:04:05,516 it will become easier to manage this way. 64 00:04:05,516 --> 00:04:07,516 So section and features. 65 00:04:09,463 --> 00:04:13,046 And here we have two dashes, so to separate 66 00:04:14,816 --> 00:04:17,335 this name from this name in a better way. 67 00:04:17,335 --> 00:04:20,085 So I will select this in a script 68 00:04:21,061 --> 00:04:24,811 and actually just close these two, all right. 69 00:04:26,030 --> 00:04:30,988 And now this is where our Waypoint's plugin comes in. 70 00:04:30,988 --> 00:04:33,905 So now we the Waypoints method here 71 00:04:36,668 --> 00:04:40,325 and this is how it works, such as it's down here. 72 00:04:40,325 --> 00:04:43,274 So function and then this function 73 00:04:43,274 --> 00:04:46,024 has an argument called direction. 74 00:04:48,092 --> 00:04:52,028 And what this direction means is that we can actually detect 75 00:04:52,028 --> 00:04:54,594 if the user is scrolling down the webpage 76 00:04:54,594 --> 00:04:56,616 or if he's scrolling up. 77 00:04:56,616 --> 00:04:58,381 And we will take now a decision 78 00:04:58,381 --> 00:05:00,798 based on this parameter here. 79 00:05:03,280 --> 00:05:06,514 So, if you're new to programming, 80 00:05:06,514 --> 00:05:09,741 we have a thing in programming in all major 81 00:05:09,741 --> 00:05:14,009 programming languages which is called the If Construct 82 00:05:14,009 --> 00:05:17,423 and what the If does is very simple. 83 00:05:17,423 --> 00:05:21,590 So if something is true, then a certain thing will happen, 84 00:05:22,765 --> 00:05:26,480 and if it's not true, well then another thing happens. 85 00:05:26,480 --> 00:05:28,640 Now in this case we want to say 86 00:05:28,640 --> 00:05:30,723 if the direction is down, 87 00:05:33,841 --> 00:05:36,674 then something happens and if not, 88 00:05:38,241 --> 00:05:41,225 well then something else happens. 89 00:05:41,225 --> 00:05:43,725 And what do we want to happen? 90 00:05:44,685 --> 00:05:47,852 So if the user scrolls down like this, 91 00:05:49,700 --> 00:05:52,788 we want the sticky navigation to appear. 92 00:05:52,788 --> 00:05:56,504 And if the user scrolls up like this, 93 00:05:56,504 --> 00:05:59,087 then we want this to disappear. 94 00:06:02,680 --> 00:06:05,013 So we select the nav element 95 00:06:08,402 --> 00:06:11,804 and then in jQuery we have this very handy method 96 00:06:11,804 --> 00:06:15,821 and this is actually a jQuery method and had nav 97 00:06:15,821 --> 00:06:17,805 and has nothing to do with Waypoints 98 00:06:17,805 --> 00:06:19,472 and it is add class. 99 00:06:22,426 --> 00:06:27,338 And of course, the class we want to add is sticky. 100 00:06:27,338 --> 00:06:30,217 So I will now remove this from here. 101 00:06:30,217 --> 00:06:32,134 We no longer need this. 102 00:06:33,257 --> 00:06:35,757 So this is the original state. 103 00:06:37,692 --> 00:06:39,608 So, when a user scrolls down, 104 00:06:39,608 --> 00:06:42,487 then this class sticky will be added. 105 00:06:42,487 --> 00:06:46,654 And the other way around, so if the user scrolls up, 106 00:06:49,406 --> 00:06:52,989 then remove the class, remove class sticky. 107 00:07:01,330 --> 00:07:03,997 So I think this should work now. 108 00:07:05,242 --> 00:07:07,825 Here is Waypoint, not Waypoints 109 00:07:10,861 --> 00:07:14,414 and now let's go and check this out. 110 00:07:14,414 --> 00:07:16,794 So this is the normal state, again so this is how 111 00:07:16,794 --> 00:07:20,961 it should look in a normal way, and now this works. 112 00:07:25,560 --> 00:07:28,204 So we scrolled past this place here 113 00:07:28,204 --> 00:07:31,605 which is the beginning of the section, 114 00:07:31,605 --> 00:07:34,614 and then this appears like magic. 115 00:07:34,614 --> 00:07:36,614 This is very cool right. 116 00:07:37,633 --> 00:07:41,783 But we want it even better because you know, 117 00:07:41,783 --> 00:07:44,941 when we come here, now there is no space 118 00:07:44,941 --> 00:07:47,530 between this navigation and this title here. 119 00:07:47,530 --> 00:07:50,629 So you want this to happen a little sooner. 120 00:07:50,629 --> 00:07:55,169 So let's say we want this to happen when we're here 121 00:07:55,169 --> 00:07:57,724 and not only down here. 122 00:07:57,724 --> 00:08:01,807 So we can easily do that here with this extension 123 00:08:02,867 --> 00:08:05,305 and is actually explained down here. 124 00:08:05,305 --> 00:08:08,638 So I'll just copy this and paste it here 125 00:08:11,481 --> 00:08:14,314 so we can specify some offset here 126 00:08:15,428 --> 00:08:19,552 in percent, but I will do it as in pixels, 127 00:08:19,552 --> 00:08:23,697 so let's say 60 pixel, so this will happen 60 pixels 128 00:08:23,697 --> 00:08:27,280 before we hit this section that we defined. 129 00:08:31,986 --> 00:08:34,319 So let's check that as well, 130 00:08:36,178 --> 00:08:39,595 and yeah, so this happens at a cool place 131 00:08:41,402 --> 00:08:45,569 and now from here on this navigation always stays in place. 132 00:08:48,682 --> 00:08:51,805 Now, you saw something strange happen here 133 00:08:51,805 --> 00:08:53,388 which was this one. 134 00:08:54,625 --> 00:08:58,792 So the navigation kind of is behind of the images, right. 135 00:09:00,280 --> 00:09:04,843 So I will have to show you yet one more CSS property 136 00:09:04,843 --> 00:09:09,359 and that is actually also kind of an important one 137 00:09:09,359 --> 00:09:11,609 and it's this, where is it? 138 00:09:14,920 --> 00:09:18,003 We have to say z index, and we set it 139 00:09:19,020 --> 00:09:23,187 to the maximum allowed which is 9999, and the z index 140 00:09:24,674 --> 00:09:28,257 it finds the vertical stacking of elements. 141 00:09:29,201 --> 00:09:32,139 So it's like a stack of elements and now 142 00:09:32,139 --> 00:09:35,320 our sticky navigation will be always at the top. 143 00:09:35,320 --> 00:09:39,198 So this element will be on top of all the other elements 144 00:09:39,198 --> 00:09:43,115 because it has the highest possible value here. 145 00:09:45,061 --> 00:09:47,061 So let's check that out. 146 00:09:49,911 --> 00:09:54,078 So you see right now this is over all the other elements. 147 00:09:56,029 --> 00:09:57,862 So it's always on top. 148 00:09:59,466 --> 00:10:01,033 Great, this is exactly what we want. 149 00:10:01,033 --> 00:10:03,146 Now something weird happened here, I don't know 150 00:10:03,146 --> 00:10:04,690 exactly why this happened. 151 00:10:04,690 --> 00:10:08,452 We lost some space here that we had before, 152 00:10:08,452 --> 00:10:09,952 let me check that. 153 00:10:11,493 --> 00:10:15,326 And yeah, of course, so I have a mistake here. 154 00:10:16,927 --> 00:10:19,515 So this is the way to go. 155 00:10:19,515 --> 00:10:21,682 So now it will be perfect. 156 00:10:22,987 --> 00:10:27,353 So original state, and once again with sticky navigation. 157 00:10:27,353 --> 00:10:29,872 So, very powerful stuff, and we will actually 158 00:10:29,872 --> 00:10:33,727 use this Waypoint plugin later again because it allows us 159 00:10:33,727 --> 00:10:36,246 to make some cool stuff with it. 160 00:10:36,246 --> 00:10:39,113 So I hope you liked this lecture and next stop 161 00:10:39,113 --> 00:10:41,807 we will learn how to actually scroll to the different 162 00:10:41,807 --> 00:10:45,116 sections when we click on these links here. 163 00:10:45,116 --> 00:10:46,283 So stay tuned.