WEBVTT 1 00:00:01.470 --> 00:00:04.380 Let's implement another pretty common feature 2 00:00:04.380 --> 00:00:08.090 on webpages, which is that the navigation bar 3 00:00:08.090 --> 00:00:10.870 becomes attached to the top of the page 4 00:00:10.870 --> 00:00:13.440 after we scroll to a certain point. 5 00:00:13.440 --> 00:00:16.130 And this is called a sticky navigation. 6 00:00:16.130 --> 00:00:18.630 And so let's build one for our site. 7 00:00:20.350 --> 00:00:24.090 So, the effect that I'm talking about is this one. 8 00:00:24.090 --> 00:00:27.850 So, as we scroll down, once we then reach a certain point, 9 00:00:27.850 --> 00:00:31.403 the menu bar here becomes attached to the top of the page. 10 00:00:32.280 --> 00:00:35.030 And once again, I'm sure that you have seen this 11 00:00:35.030 --> 00:00:38.133 in many pages that you visit. 12 00:00:39.090 --> 00:00:42.070 Now, let's just check out the HTML here, 13 00:00:42.070 --> 00:00:43.783 and just to see how this works. 14 00:00:44.910 --> 00:00:47.420 So, we make this navigation sticky 15 00:00:47.420 --> 00:00:49.870 basically by adding this sticky class 16 00:00:49.870 --> 00:00:52.550 whenever we reach a certain position. 17 00:00:52.550 --> 00:00:54.480 And so this sticky class, 18 00:00:54.480 --> 00:00:56.770 as you can see here on the right side, 19 00:00:56.770 --> 00:01:00.090 all it does is to set the position to fixed 20 00:01:00.090 --> 00:01:02.430 and it also changes the background color 21 00:01:02.430 --> 00:01:03.733 to this transparent. 22 00:01:04.740 --> 00:01:07.540 So, you see that we can actually see through 23 00:01:07.540 --> 00:01:09.290 this navigation a little bit, 24 00:01:09.290 --> 00:01:11.393 which gives it a really cool effect. 25 00:01:13.210 --> 00:01:14.043 Okay. 26 00:01:17.170 --> 00:01:21.510 So, sticky navigation, and to implement this, 27 00:01:21.510 --> 00:01:24.510 we're gonna use the scroll event for now. 28 00:01:24.510 --> 00:01:26.640 So, there's actually a better way of 29 00:01:26.640 --> 00:01:28.640 what we're gonna do in this video, 30 00:01:28.640 --> 00:01:32.210 but let's start by working with the scroll event now 31 00:01:32.210 --> 00:01:35.320 because sometimes that's good to know as well. 32 00:01:35.320 --> 00:01:38.393 So, the scroll event is available on Window. 33 00:01:39.720 --> 00:01:40.553 All right. 34 00:01:40.553 --> 00:01:44.057 So, not document, but really window.addeventlistener 35 00:01:47.099 --> 00:01:48.223 and then scroll. 36 00:01:49.170 --> 00:01:50.060 Okay. 37 00:01:50.060 --> 00:01:51.970 So, this event will be fired off 38 00:01:51.970 --> 00:01:54.743 each time that we scroll on our page. 39 00:02:00.270 --> 00:02:01.750 Okay. 40 00:02:01.750 --> 00:02:04.683 And let's start by taking a look actually at the event, 41 00:02:05.530 --> 00:02:07.610 just so you see that it actually fires 42 00:02:07.610 --> 00:02:09.920 each time that I'm scrolling. 43 00:02:09.920 --> 00:02:11.930 So, I just scroll this little bit 44 00:02:11.930 --> 00:02:14.840 and it already created all of these events. 45 00:02:14.840 --> 00:02:17.133 So, it fired all these times. 46 00:02:18.860 --> 00:02:21.620 So, to scroll event is not really efficient 47 00:02:21.620 --> 00:02:23.650 and usually it should be avoided. 48 00:02:23.650 --> 00:02:26.713 But again for now, let's use that. 49 00:02:28.670 --> 00:02:31.923 And now let's start by getting our current scroll position. 50 00:02:34.079 --> 00:02:37.580 So, let's use window.scrolly, 51 00:02:37.580 --> 00:02:39.470 just as we learned before. 52 00:02:39.470 --> 00:02:41.240 And so this scroll position here 53 00:02:41.240 --> 00:02:45.020 is really on the Window object and not at the event. 54 00:02:45.020 --> 00:02:46.490 So, in the scroll event, 55 00:02:46.490 --> 00:02:49.790 this event object here is actually pretty useless. 56 00:02:49.790 --> 00:02:51.140 We don't even need it here. 57 00:02:53.170 --> 00:02:54.170 Okay. 58 00:02:54.170 --> 00:02:56.070 So, let's just reload here. 59 00:02:56.070 --> 00:02:57.510 And so as we scroll, 60 00:02:57.510 --> 00:02:59.610 you see that each time the event is fired, 61 00:02:59.610 --> 00:03:01.510 we get to the current scroll position. 62 00:03:03.370 --> 00:03:06.540 And remember that this is the position basically, 63 00:03:06.540 --> 00:03:09.260 from the point in the view port. 64 00:03:09.260 --> 00:03:13.210 So, this point here to the very top of the page. 65 00:03:13.210 --> 00:03:15.940 And that's why in the beginning we start at zero 66 00:03:15.940 --> 00:03:18.310 because now the visible part of the site 67 00:03:18.310 --> 00:03:21.860 is exactly also at the top of the page. 68 00:03:21.860 --> 00:03:23.320 Okay. 69 00:03:23.320 --> 00:03:26.240 So, remember to make the navigation sticky, 70 00:03:26.240 --> 00:03:30.000 we will add that sticky class that I showed you earlier. 71 00:03:30.000 --> 00:03:32.930 But now the question is, when exactly should 72 00:03:32.930 --> 00:03:35.383 the navigation actually become sticky? 73 00:03:36.260 --> 00:03:39.260 Well, it should happen here as soon as we reach 74 00:03:39.260 --> 00:03:40.373 the first section. 75 00:03:42.010 --> 00:03:46.240 So, basically as soon as we reach this position. 76 00:03:46.240 --> 00:03:50.550 So, this line here marks the beginning of the first section. 77 00:03:50.550 --> 00:03:52.660 And so when we reached this position, 78 00:03:52.660 --> 00:03:55.330 we want to make the navigation sticky. 79 00:03:55.330 --> 00:03:57.607 Now, of course, we're not gonna like hard coat 80 00:03:57.607 --> 00:03:59.180 the value here. 81 00:03:59.180 --> 00:04:04.180 So, I could take like 565, but that doesn't work 82 00:04:04.180 --> 00:04:08.760 because the size of this element that comes before 83 00:04:08.760 --> 00:04:11.600 is actually dependent on the view port size. 84 00:04:11.600 --> 00:04:14.890 So, if I do this, then you see that 85 00:04:14.890 --> 00:04:19.890 the first section starts way earlier, so like at 300. 86 00:04:20.230 --> 00:04:22.540 And so we cannot hard coat to value 87 00:04:22.540 --> 00:04:26.100 and therefore we need to calculate it dynamically. 88 00:04:26.100 --> 00:04:28.090 So, how do we do that? 89 00:04:28.090 --> 00:04:31.940 Well, remember that we can determine the position actually, 90 00:04:31.940 --> 00:04:33.453 of this first section. 91 00:04:34.570 --> 00:04:36.060 So, let's do that. 92 00:04:36.060 --> 00:04:38.493 And I think I already have it selected up here. 93 00:04:39.640 --> 00:04:40.473 Yeah. 94 00:04:40.473 --> 00:04:42.573 So, section one, which is this one. 95 00:04:46.070 --> 00:04:49.320 So, we need to do this outside, actually, 96 00:04:49.320 --> 00:04:51.383 of this event handler. 97 00:04:54.362 --> 00:04:57.727 So, that's sectionone.getboundingclientwreckedremember. 98 00:05:03.247 --> 00:05:08.247 And so let's call this initial coordinates, so just coards. 99 00:05:10.180 --> 00:05:11.563 And take a look at it. 100 00:05:14.020 --> 00:05:17.283 And so now we get this current top value here, 101 00:05:18.290 --> 00:05:19.123 where is it? 102 00:05:19.123 --> 00:05:20.470 Ah, right here. 103 00:05:20.470 --> 00:05:23.600 So, we get to current top value of the section. 104 00:05:23.600 --> 00:05:25.490 And so we can now work with that 105 00:05:26.700 --> 00:05:30.510 and it's even better if we do this 106 00:05:30.510 --> 00:05:33.780 when scrolled to the top, because then, basically, 107 00:05:33.780 --> 00:05:36.120 this top position here is all the way 108 00:05:36.120 --> 00:05:38.783 from the top of the page all the way here. 109 00:05:39.870 --> 00:05:43.170 So, all the way to the beginning of that first section. 110 00:05:43.170 --> 00:05:44.200 Okay. 111 00:05:44.200 --> 00:05:47.963 And so let's now use this value to add our sticky class. 112 00:05:49.030 --> 00:05:54.030 So, we can say that whenever the window.scroll position 113 00:05:54.150 --> 00:05:59.150 and Y is greater than the initial coordinates at the top, 114 00:06:04.100 --> 00:06:08.423 then we want to add this sticky class. 115 00:06:10.980 --> 00:06:12.000 Right. 116 00:06:12.000 --> 00:06:14.263 And if not, then we want to remove it. 117 00:06:19.280 --> 00:06:22.010 So, I can use nav here because I already 118 00:06:22.010 --> 00:06:24.230 selected it in the previous lecture. 119 00:06:24.230 --> 00:06:29.230 So nav is of course, this entire navigation bar 120 00:06:29.400 --> 00:06:31.823 that we also work with in the previous lecture. 121 00:06:33.620 --> 00:06:34.500 So, remove here 122 00:06:37.530 --> 00:06:39.533 and here, indeed, we need a new line. 123 00:06:40.570 --> 00:06:42.530 And so now that works. 124 00:06:42.530 --> 00:06:44.150 And so let's check this here 125 00:06:46.180 --> 00:06:47.763 and wait for it. 126 00:06:48.870 --> 00:06:51.590 And indeed, now it's here. 127 00:06:51.590 --> 00:06:53.960 So, now the sticky class was added 128 00:06:53.960 --> 00:06:56.640 because we reached the position in the page 129 00:06:56.640 --> 00:06:59.020 which is greater than the distance 130 00:06:59.020 --> 00:07:02.400 of this first section from the top. 131 00:07:02.400 --> 00:07:03.233 All right. 132 00:07:04.520 --> 00:07:08.580 So, this works just fine now, but as I mentioned before, 133 00:07:08.580 --> 00:07:11.480 this is pretty bad for performance. 134 00:07:11.480 --> 00:07:15.670 So, using the scroll event for performing a certain action 135 00:07:15.670 --> 00:07:17.730 at a certain position of the page 136 00:07:17.730 --> 00:07:20.010 is really not the way to go. 137 00:07:20.010 --> 00:07:22.600 And again, that's because the scroll event here 138 00:07:22.600 --> 00:07:25.970 fires all the time, no matter how small 139 00:07:25.970 --> 00:07:28.250 the change is here in the scroll. 140 00:07:28.250 --> 00:07:31.410 And so that makes for a pretty bad performance 141 00:07:31.410 --> 00:07:33.240 and especially on mobile. 142 00:07:33.240 --> 00:07:35.750 Like on the modern computer, of course, 143 00:07:35.750 --> 00:07:37.710 you're not gonna notice anything, 144 00:07:37.710 --> 00:07:41.060 but if you're using this page maybe on an older smartphone, 145 00:07:41.060 --> 00:07:43.700 then it's not gonna be so nice. 146 00:07:43.700 --> 00:07:44.970 All right. 147 00:07:44.970 --> 00:07:47.960 And so in the next video, we're gonna look at a better 148 00:07:47.960 --> 00:07:50.020 and way more efficient tool, 149 00:07:50.020 --> 00:07:52.973 which is the intersection of server API.