Original subtitles

1 1

Let's implement another pretty common feature 2

2

on webpages, which is that the navigation bar 3

3

becomes attached to the top of the page 4

4

after we scroll to a certain point. 5

5

And this is called a sticky navigation. 6

6

And so let's build one for our site. 7

7

So, the effect that I'm talking about is this one. 8

8

So, as we scroll down, once we then reach a certain point, 9

9

the menu bar here becomes attached to the top of the page. 10

10

And once again, I'm sure that you have seen this 11

11

in many pages that you visit. 12

12

Now, let's just check out the HTML here, 13

13

and just to see how this works. 14

14

So, we make this navigation sticky 15

15

basically by adding this sticky class 16

16

whenever we reach a certain position. 17

17

And so this sticky class, 18

18

as you can see here on the right side, 19

19

all it does is to set the position to fixed 20

20

and it also changes the background color 21

21

to this transparent. 22

22

So, you see that we can actually see through 23

23

this navigation a little bit, 24

24

which gives it a really cool effect. 25

25

Okay. 26

26

So, sticky navigation, and to implement this, 27

27

we're gonna use the scroll event for now. 28

28

So, there's actually a better way of 29

29

what we're gonna do in this video, 30

30

but let's start by working with the scroll event now 31

31

because sometimes that's good to know as well. 32

32

So, the scroll event is available on Window. 33

33

All right. 34

34

So, not document, but really window.addeventlistener 35

35

and then scroll. 36

36

Okay. 37

37

So, this event will be fired off 38

38

each time that we scroll on our page. 39

39

Okay. 40

40

And let's start by taking a look actually at the event, 41

41

just so you see that it actually fires 42

42

each time that I'm scrolling. 43

43

So, I just scroll this little bit 44

44

and it already created all of these events. 45

45

So, it fired all these times. 46

46

So, to scroll event is not really efficient 47

47

and usually it should be avoided. 48

48

But again for now, let's use that. 49

49

And now let's start by getting our current scroll position. 50

50

So, let's use window.scrolly, 51

51

just as we learned before. 52

52

And so this scroll position here 53

53

is really on the Window object and not at the event. 54

54

So, in the scroll event, 55

55

this event object here is actually pretty useless. 56

56

We don't even need it here. 57

57

Okay. 58

58

So, let's just reload here. 59

59

And so as we scroll, 60

60

you see that each time the event is fired, 61

61

we get to the current scroll position. 62

62

And remember that this is the position basically, 63

63

from the point in the view port. 64

64

So, this point here to the very top of the page. 65

65

And that's why in the beginning we start at zero 66

66

because now the visible part of the site 67

67

is exactly also at the top of the page. 68

68

Okay. 69

69

So, remember to make the navigation sticky, 70

70

we will add that sticky class that I showed you earlier. 71

71

But now the question is, when exactly should 72

72

the navigation actually become sticky? 73

73

Well, it should happen here as soon as we reach 74

74

the first section. 75

75

So, basically as soon as we reach this position. 76

76

So, this line here marks the beginning of the first section. 77

77

And so when we reached this position, 78

78

we want to make the navigation sticky. 79

79

Now, of course, we're not gonna like hard coat 80

80

the value here. 81

81

So, I could take like 565, but that doesn't work 82

82

because the size of this element that comes before 83

83

is actually dependent on the view port size. 84

84

So, if I do this, then you see that 85

85

the first section starts way earlier, so like at 300. 86

86

And so we cannot hard coat to value 87

87

and therefore we need to calculate it dynamically. 88

88

So, how do we do that? 89

89

Well, remember that we can determine the position actually, 90

90

of this first section. 91

91

So, let's do that. 92

92

And I think I already have it selected up here. 93

93

Yeah. 94

94

So, section one, which is this one. 95

95

So, we need to do this outside, actually, 96

96

of this event handler. 97

97

So, that's sectionone.getboundingclientwreckedremember. 98

98

And so let's call this initial coordinates, so just coards. 99

99

And take a look at it. 100

100

And so now we get this current top value here, 101

101

where is it? 102

102

Ah, right here. 103

103

So, we get to current top value of the section. 104

104

And so we can now work with that 105

105

and it's even better if we do this 106

106

when scrolled to the top, because then, basically, 107

107

this top position here is all the way 108

108

from the top of the page all the way here. 109

109

So, all the way to the beginning of that first section. 110

110

Okay. 111

111

And so let's now use this value to add our sticky class. 112

112

So, we can say that whenever the window.scroll position 113

113

and Y is greater than the initial coordinates at the top, 114

114

then we want to add this sticky class. 115

115

Right. 116

116

And if not, then we want to remove it. 117

117

So, I can use nav here because I already 118

118

selected it in the previous lecture. 119

119

So nav is of course, this entire navigation bar 120

120

that we also work with in the previous lecture. 121

121

So, remove here 122

122

and here, indeed, we need a new line. 123

123

And so now that works. 124

124

And so let's check this here 125

125

and wait for it. 126

126

And indeed, now it's here. 127

127

So, now the sticky class was added 128

128

because we reached the position in the page 129

129

which is greater than the distance 130

130

of this first section from the top. 131

131

All right. 132

132

So, this works just fine now, but as I mentioned before, 133

133

this is pretty bad for performance. 134

134

So, using the scroll event for performing a certain action 135

135

at a certain position of the page 136

136

is really not the way to go. 137

137

And again, that's because the scroll event here 138

138

fires all the time, no matter how small 139

139

the change is here in the scroll. 140

140

And so that makes for a pretty bad performance 141

141

and especially on mobile. 142

142

Like on the modern computer, of course, 143

143

you're not gonna notice anything, 144

144

but if you're using this page maybe on an older smartphone, 145

145

then it's not gonna be so nice. 146

146

All right. 147

147

And so in the next video, we're gonna look at a better 148

148

and way more efficient tool, 149

149

which is the intersection of server API.