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