Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,470 --> 00:00:04,380
Let's implement another pretty common feature
2
2
00:00:04,380 --> 00:00:08,090
on webpages, which is that the navigation bar
3
3
00:00:08,090 --> 00:00:10,870
becomes attached to the top of the page
4
4
00:00:10,870 --> 00:00:13,440
after we scroll to a certain point.
5
5
00:00:13,440 --> 00:00:16,130
And this is called a sticky navigation.
6
6
00:00:16,130 --> 00:00:18,630
And so let's build one for our site.
7
7
00:00:20,350 --> 00:00:24,090
So, the effect that I'm talking about is this one.
8
8
00:00:24,090 --> 00:00:27,850
So, as we scroll down, once we then reach a certain point,
9
9
00:00:27,850 --> 00:00:31,403
the menu bar here becomes attached to the top of the page.
10
10
00:00:32,280 --> 00:00:35,030
And once again, I'm sure that you have seen this
11
11
00:00:35,030 --> 00:00:38,133
in many pages that you visit.
12
12
00:00:39,090 --> 00:00:42,070
Now, let's just check out the HTML here,
13
13
00:00:42,070 --> 00:00:43,783
and just to see how this works.
14
14
00:00:44,910 --> 00:00:47,420
So, we make this navigation sticky
15
15
00:00:47,420 --> 00:00:49,870
basically by adding this sticky class
16
16
00:00:49,870 --> 00:00:52,550
whenever we reach a certain position.
17
17
00:00:52,550 --> 00:00:54,480
And so this sticky class,
18
18
00:00:54,480 --> 00:00:56,770
as you can see here on the right side,
19
19
00:00:56,770 --> 00:01:00,090
all it does is to set the position to fixed
20
20
00:01:00,090 --> 00:01:02,430
and it also changes the background color
21
21
00:01:02,430 --> 00:01:03,733
to this transparent.
22
22
00:01:04,740 --> 00:01:07,540
So, you see that we can actually see through
23
23
00:01:07,540 --> 00:01:09,290
this navigation a little bit,
24
24
00:01:09,290 --> 00:01:11,393
which gives it a really cool effect.
25
25
00:01:13,210 --> 00:01:14,043
Okay.
26
26
00:01:17,170 --> 00:01:21,510
So, sticky navigation, and to implement this,
27
27
00:01:21,510 --> 00:01:24,510
we're gonna use the scroll event for now.
28
28
00:01:24,510 --> 00:01:26,640
So, there's actually a better way of
29
29
00:01:26,640 --> 00:01:28,640
what we're gonna do in this video,
30
30
00:01:28,640 --> 00:01:32,210
but let's start by working with the scroll event now
31
31
00:01:32,210 --> 00:01:35,320
because sometimes that's good to know as well.
32
32
00:01:35,320 --> 00:01:38,393
So, the scroll event is available on Window.
33
33
00:01:39,720 --> 00:01:40,553
All right.
34
34
00:01:40,553 --> 00:01:44,057
So, not document, but really window.addeventlistener
35
35
00:01:47,099 --> 00:01:48,223
and then scroll.
36
36
00:01:49,170 --> 00:01:50,060
Okay.
37
37
00:01:50,060 --> 00:01:51,970
So, this event will be fired off
38
38
00:01:51,970 --> 00:01:54,743
each time that we scroll on our page.
39
39
00:02:00,270 --> 00:02:01,750
Okay.
40
40
00:02:01,750 --> 00:02:04,683
And let's start by taking a look actually at the event,
41
41
00:02:05,530 --> 00:02:07,610
just so you see that it actually fires
42
42
00:02:07,610 --> 00:02:09,920
each time that I'm scrolling.
43
43
00:02:09,920 --> 00:02:11,930
So, I just scroll this little bit
44
44
00:02:11,930 --> 00:02:14,840
and it already created all of these events.
45
45
00:02:14,840 --> 00:02:17,133
So, it fired all these times.
46
46
00:02:18,860 --> 00:02:21,620
So, to scroll event is not really efficient
47
47
00:02:21,620 --> 00:02:23,650
and usually it should be avoided.
48
48
00:02:23,650 --> 00:02:26,713
But again for now, let's use that.
49
49
00:02:28,670 --> 00:02:31,923
And now let's start by getting our current scroll position.
50
50
00:02:34,079 --> 00:02:37,580
So, let's use window.scrolly,
51
51
00:02:37,580 --> 00:02:39,470
just as we learned before.
52
52
00:02:39,470 --> 00:02:41,240
And so this scroll position here
53
53
00:02:41,240 --> 00:02:45,020
is really on the Window object and not at the event.
54
54
00:02:45,020 --> 00:02:46,490
So, in the scroll event,
55
55
00:02:46,490 --> 00:02:49,790
this event object here is actually pretty useless.
56
56
00:02:49,790 --> 00:02:51,140
We don't even need it here.
57
57
00:02:53,170 --> 00:02:54,170
Okay.
58
58
00:02:54,170 --> 00:02:56,070
So, let's just reload here.
59
59
00:02:56,070 --> 00:02:57,510
And so as we scroll,
60
60
00:02:57,510 --> 00:02:59,610
you see that each time the event is fired,
61
61
00:02:59,610 --> 00:03:01,510
we get to the current scroll position.
62
62
00:03:03,370 --> 00:03:06,540
And remember that this is the position basically,
63
63
00:03:06,540 --> 00:03:09,260
from the point in the view port.
64
64
00:03:09,260 --> 00:03:13,210
So, this point here to the very top of the page.
65
65
00:03:13,210 --> 00:03:15,940
And that's why in the beginning we start at zero
66
66
00:03:15,940 --> 00:03:18,310
because now the visible part of the site
67
67
00:03:18,310 --> 00:03:21,860
is exactly also at the top of the page.
68
68
00:03:21,860 --> 00:03:23,320
Okay.
69
69
00:03:23,320 --> 00:03:26,240
So, remember to make the navigation sticky,
70
70
00:03:26,240 --> 00:03:30,000
we will add that sticky class that I showed you earlier.
71
71
00:03:30,000 --> 00:03:32,930
But now the question is, when exactly should
72
72
00:03:32,930 --> 00:03:35,383
the navigation actually become sticky?
73
73
00:03:36,260 --> 00:03:39,260
Well, it should happen here as soon as we reach
74
74
00:03:39,260 --> 00:03:40,373
the first section.
75
75
00:03:42,010 --> 00:03:46,240
So, basically as soon as we reach this position.
76
76
00:03:46,240 --> 00:03:50,550
So, this line here marks the beginning of the first section.
77
77
00:03:50,550 --> 00:03:52,660
And so when we reached this position,
78
78
00:03:52,660 --> 00:03:55,330
we want to make the navigation sticky.
79
79
00:03:55,330 --> 00:03:57,607
Now, of course, we're not gonna like hard coat
80
80
00:03:57,607 --> 00:03:59,180
the value here.
81
81
00:03:59,180 --> 00:04:04,180
So, I could take like 565, but that doesn't work
82
82
00:04:04,180 --> 00:04:08,760
because the size of this element that comes before
83
83
00:04:08,760 --> 00:04:11,600
is actually dependent on the view port size.
84
84
00:04:11,600 --> 00:04:14,890
So, if I do this, then you see that
85
85
00:04:14,890 --> 00:04:19,890
the first section starts way earlier, so like at 300.
86
86
00:04:20,230 --> 00:04:22,540
And so we cannot hard coat to value
87
87
00:04:22,540 --> 00:04:26,100
and therefore we need to calculate it dynamically.
88
88
00:04:26,100 --> 00:04:28,090
So, how do we do that?
89
89
00:04:28,090 --> 00:04:31,940
Well, remember that we can determine the position actually,
90
90
00:04:31,940 --> 00:04:33,453
of this first section.
91
91
00:04:34,570 --> 00:04:36,060
So, let's do that.
92
92
00:04:36,060 --> 00:04:38,493
And I think I already have it selected up here.
93
93
00:04:39,640 --> 00:04:40,473
Yeah.
94
94
00:04:40,473 --> 00:04:42,573
So, section one, which is this one.
95
95
00:04:46,070 --> 00:04:49,320
So, we need to do this outside, actually,
96
96
00:04:49,320 --> 00:04:51,383
of this event handler.
97
97
00:04:54,362 --> 00:04:57,727
So, that's sectionone.getboundingclientwreckedremember.
98
98
00:05:03,247 --> 00:05:08,247
And so let's call this initial coordinates, so just coards.
99
99
00:05:10,180 --> 00:05:11,563
And take a look at it.
100
100
00:05:14,020 --> 00:05:17,283
And so now we get this current top value here,
101
101
00:05:18,290 --> 00:05:19,123
where is it?
102
102
00:05:19,123 --> 00:05:20,470
Ah, right here.
103
103
00:05:20,470 --> 00:05:23,600
So, we get to current top value of the section.
104
104
00:05:23,600 --> 00:05:25,490
And so we can now work with that
105
105
00:05:26,700 --> 00:05:30,510
and it's even better if we do this
106
106
00:05:30,510 --> 00:05:33,780
when scrolled to the top, because then, basically,
107
107
00:05:33,780 --> 00:05:36,120
this top position here is all the way
108
108
00:05:36,120 --> 00:05:38,783
from the top of the page all the way here.
109
109
00:05:39,870 --> 00:05:43,170
So, all the way to the beginning of that first section.
110
110
00:05:43,170 --> 00:05:44,200
Okay.
111
111
00:05:44,200 --> 00:05:47,963
And so let's now use this value to add our sticky class.
112
112
00:05:49,030 --> 00:05:54,030
So, we can say that whenever the window.scroll position
113
113
00:05:54,150 --> 00:05:59,150
and Y is greater than the initial coordinates at the top,
114
114
00:06:04,100 --> 00:06:08,423
then we want to add this sticky class.
115
115
00:06:10,980 --> 00:06:12,000
Right.
116
116
00:06:12,000 --> 00:06:14,263
And if not, then we want to remove it.
117
117
00:06:19,280 --> 00:06:22,010
So, I can use nav here because I already
118
118
00:06:22,010 --> 00:06:24,230
selected it in the previous lecture.
119
119
00:06:24,230 --> 00:06:29,230
So nav is of course, this entire navigation bar
120
120
00:06:29,400 --> 00:06:31,823
that we also work with in the previous lecture.
121
121
00:06:33,620 --> 00:06:34,500
So, remove here
122
122
00:06:37,530 --> 00:06:39,533
and here, indeed, we need a new line.
123
123
00:06:40,570 --> 00:06:42,530
And so now that works.
124
124
00:06:42,530 --> 00:06:44,150
And so let's check this here
125
125
00:06:46,180 --> 00:06:47,763
and wait for it.
126
126
00:06:48,870 --> 00:06:51,590
And indeed, now it's here.
127
127
00:06:51,590 --> 00:06:53,960
So, now the sticky class was added
128
128
00:06:53,960 --> 00:06:56,640
because we reached the position in the page
129
129
00:06:56,640 --> 00:06:59,020
which is greater than the distance
130
130
00:06:59,020 --> 00:07:02,400
of this first section from the top.
131
131
00:07:02,400 --> 00:07:03,233
All right.
132
132
00:07:04,520 --> 00:07:08,580
So, this works just fine now, but as I mentioned before,
133
133
00:07:08,580 --> 00:07:11,480
this is pretty bad for performance.
134
134
00:07:11,480 --> 00:07:15,670
So, using the scroll event for performing a certain action
135
135
00:07:15,670 --> 00:07:17,730
at a certain position of the page
136
136
00:07:17,730 --> 00:07:20,010
is really not the way to go.
137
137
00:07:20,010 --> 00:07:22,600
And again, that's because the scroll event here
138
138
00:07:22,600 --> 00:07:25,970
fires all the time, no matter how small
139
139
00:07:25,970 --> 00:07:28,250
the change is here in the scroll.
140
140
00:07:28,250 --> 00:07:31,410
And so that makes for a pretty bad performance
141
141
00:07:31,410 --> 00:07:33,240
and especially on mobile.
142
142
00:07:33,240 --> 00:07:35,750
Like on the modern computer, of course,
143
143
00:07:35,750 --> 00:07:37,710
you're not gonna notice anything,
144
144
00:07:37,710 --> 00:07:41,060
but if you're using this page maybe on an older smartphone,
145
145
00:07:41,060 --> 00:07:43,700
then it's not gonna be so nice.
146
146
00:07:43,700 --> 00:07:44,970
All right.
147
147
00:07:44,970 --> 00:07:47,960
And so in the next video, we're gonna look at a better
148
148
00:07:47,960 --> 00:07:50,020
and way more efficient tool,
149
149
00:07:50,020 --> 00:07:52,973
which is the intersection of server API.
12527
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.