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.