Original subtitles

1 1

Welcome to part two 2

2

of Building a sticky navigation. 3

3

In this video we'll use jQuery to make this 4

4

sticky navigation work the way want it. 5

5

So, in order to do that, we use a simple jQuery plugin 6

6

which is called Waypoints. 7

7

And Waypoints is an easy way to trigger a function 8

8

when we scroll to an element, which is exactly what we want. 9

9

So I will start downloading it 10

10

and including it in our project. 11

11

So here it is. 12

12

And extract it 13

13

and well, this comes with a bunch of stuff actually 14

14

but the file that we want is this one here 15

15

jQuery waypoints and the small version. 16

16

So I'll copy it 17

17

and omnifood 18

18

and Vendors because this time it is a JavaScript file 19

19

that we got from the internet, it's not our own file. 20

20

And actually I think it's time to 21

21

delete this old stuff here. 22

22

We don't need anymore 23

23

and this as well. 24

24

Okay so we have a nice, clean folder structure here. 25

25

And I'm now going to include this in our project 26

26

so that we don't forget it. 27

27

So we come down here and I'll put it here. 28

28

So as before, script and now it's Vendors js 29

29

and here we go. 30

30

So our own script is always the last one here. 31

31

We need to ensure that this is the last script we call. 32

32

So, let's go to the Waypoints website 33

33

and take a look at how this works. 34

34

So here in jQuery, and this is here the way that we 35

35

want to use this. 36

36

And here is actually kind of a demo, so we scroll 37

37

and then some stuff happens on the website, right. 38

38

So I will now go ahead and copy this snippet here 39

39

so that we can see how Waypoints should be used with jQuery. 40

40

I'll put it here in a comment 41

41

and you see the comment in jQuery 42

42

are done the exact same way as we do in CSS. 43

43

So, how do we want this to work? 44

44

Let's go back to our webpage 45

45

and the thing is we want this to appear 46

46

so we want this sticky navigation to appear each time 47

47

we scroll to this element here, right. 48

48

So we want it to be hidden here 49

49

and we want it to appear once we come to this section. 50

50

All right, so the first step is to actually select 51

51

this section in jQuery. 52

52

So we already know how to do that with this selector, 53

53

and now we need a class name such as in CSS. 54

54

And now, the section 55

55

is this one, and we could go ahead 56

56

and just use this class name 57

57

but we want a cleaner separation here 58

58

between the CSS and the JavaScript, 59

59

and the jQuery in this case. 60

60

So we don't want to mix up these two things 61

61

so we will create a separate class for JavaScript. 62

62

So this is much cleaner, and if you have bigger projects 63

63

it will become easier to manage this way. 64

64

So section and features. 65

65

And here we have two dashes, so to separate 66

66

this name from this name in a better way. 67

67

So I will select this in a script 68

68

and actually just close these two, all right. 69

69

And now this is where our Waypoint's plugin comes in. 70

70

So now we the Waypoints method here 71

71

and this is how it works, such as it's down here. 72

72

So function and then this function 73

73

has an argument called direction. 74

74

And what this direction means is that we can actually detect 75

75

if the user is scrolling down the webpage 76

76

or if he's scrolling up. 77

77

And we will take now a decision 78

78

based on this parameter here. 79

79

So, if you're new to programming, 80

80

we have a thing in programming in all major 81

81

programming languages which is called the If Construct 82

82

and what the If does is very simple. 83

83

So if something is true, then a certain thing will happen, 84

84

and if it's not true, well then another thing happens. 85

85

Now in this case we want to say 86

86

if the direction is down, 87

87

then something happens and if not, 88

88

well then something else happens. 89

89

And what do we want to happen? 90

90

So if the user scrolls down like this, 91

91

we want the sticky navigation to appear. 92

92

And if the user scrolls up like this, 93

93

then we want this to disappear. 94

94

So we select the nav element 95

95

and then in jQuery we have this very handy method 96

96

and this is actually a jQuery method and had nav 97

97

and has nothing to do with Waypoints 98

98

and it is add class. 99

99

And of course, the class we want to add is sticky. 100

100

So I will now remove this from here. 101

101

We no longer need this. 102

102

So this is the original state. 103

103

So, when a user scrolls down, 104

104

then this class sticky will be added. 105

105

And the other way around, so if the user scrolls up, 106

106

then remove the class, remove class sticky. 107

107

So I think this should work now. 108

108

Here is Waypoint, not Waypoints 109

109

and now let's go and check this out. 110

110

So this is the normal state, again so this is how 111

111

it should look in a normal way, and now this works. 112

112

So we scrolled past this place here 113

113

which is the beginning of the section, 114

114

and then this appears like magic. 115

115

This is very cool right. 116

116

But we want it even better because you know, 117

117

when we come here, now there is no space 118

118

between this navigation and this title here. 119

119

So you want this to happen a little sooner. 120

120

So let's say we want this to happen when we're here 121

121

and not only down here. 122

122

So we can easily do that here with this extension 123

123

and is actually explained down here. 124

124

So I'll just copy this and paste it here 125

125

so we can specify some offset here 126

126

in percent, but I will do it as in pixels, 127

127

so let's say 60 pixel, so this will happen 60 pixels 128

128

before we hit this section that we defined. 129

129

So let's check that as well, 130

130

and yeah, so this happens at a cool place 131

131

and now from here on this navigation always stays in place. 132

132

Now, you saw something strange happen here 133

133

which was this one. 134

134

So the navigation kind of is behind of the images, right. 135

135

So I will have to show you yet one more CSS property 136

136

and that is actually also kind of an important one 137

137

and it's this, where is it? 138

138

We have to say z index, and we set it 139

139

to the maximum allowed which is 9999, and the z index 140

140

it finds the vertical stacking of elements. 141

141

So it's like a stack of elements and now 142

142

our sticky navigation will be always at the top. 143

143

So this element will be on top of all the other elements 144

144

because it has the highest possible value here. 145

145

So let's check that out. 146

146

So you see right now this is over all the other elements. 147

147

So it's always on top. 148

148

Great, this is exactly what we want. 149

149

Now something weird happened here, I don't know 150

150

exactly why this happened. 151

151

We lost some space here that we had before, 152

152

let me check that. 153

153

And yeah, of course, so I have a mistake here. 154

154

So this is the way to go. 155

155

So now it will be perfect. 156

156

So original state, and once again with sticky navigation. 157

157

So, very powerful stuff, and we will actually 158

158

use this Waypoint plugin later again because it allows us 159

159

to make some cool stuff with it. 160

160

So I hope you liked this lecture and next stop 161

161

we will learn how to actually scroll to the different 162

162

sections when we click on these links here. 163

163

So stay tuned.