Voiceover: Hi. In this lecture we'll start to get our 2 2
hands dirty with jQuery. 3 3
We're going to build 4 4
a very simple so called sticky navigation. 5 5
And this is great to show you the very basics of jQuery. 6 6
So I will start off by showing you what we want to achieve. 7 7
So here in the normal state we want the navigation to show 8 8
in a normal way so here in the header. 9 9
But then as we go down here we don't want this to happen. 10 10
So we want our navigation to show up here. 11 11
With this little effect. 12 12
So that we can see the navigation always 13 13
and not just when we're in the header. 14 14
And then as we go back to the header, 15 15
then the navigation disappears. 16 16
So I'll show you again. 17 17
So navigation comes in once we get passed the header. 18 18
So we will use jQuery to add a class to the north element 19 19
every time we leave the header. 20 20
So at this point here. 21 21
So the first thing we need to do in order to do that 22 22
is to actually format this navigation in the sticky state. 23 23
Let's say so. 24 24
So this is the sticky navigation. 25 25
So, here is the north element 26 26
and this is where we will use jQuery 27 27
to add the sticky class. 28 28
So lets go to our CSS file and start by defining that class. 29 29
So where's the navigation, okay here it is. 30 30
Let me just leave some comment here. 31 31
So in fact your going to learn some more CSS here. 32 32
Maybe more CSS than jQuery, 33 33
but you know we always use a mixture of both languages. 34 34
So this is the main navi. 35 35
And down here we will now do the sticky navi. 36 36
So just a simple class. 37 37
In fact I will now just for testing purposes 38 38
add this class here so that we can see 39 39
what we're styling actually. 40 40
And the first thing we need to do is define this position. 41 41
So far we've had absolute and relative positioning, right? 42 42
And now you get to learn a new one which is fixed. 43 43
And with this property the navigation stays always 44 44
at the same point irrespective of our scrolling. 45 45
And we want this to start at the top, 46 46
and on the left corner. 47 47
So the top left corner. 48 48
So we have to define top zero, and left zero. 49 49
And we want it to be 100 percent wide. 50 50
So as you saw in that image I showed you before. 51 51
We want it to occupy the whole browser width. 52 52
And we want it to be wide. 53 53
So background color... 54 54
color... 55 55
white, 56 56
but with a little transparency. 57 57
So that we can see the content beneath it. 58 58
I'll start with 098. 59 59
This is almost no opacity. 60 60
Now let's have a look at this. 61 61
Have to open our live connection here. 62 62
Alright, this is how it looks like so far. 63 63
And we can barely see these links here, 64 64
but they are there. 65 65
But of course with the white color we defined before. 66 66
And the logo is here, so everything is here. 67 67
But now we need to style this. 68 68
But in fact it's already a sticky, right? 69 69
So let's change a couple of things here. 70 70
And I will start off by changing those things here. 71 71
So the first thing is we want to change 72 72
some of these things. 73 73
So I will copy everything then delete things I don't want. 74 74
And now I have to say... 75 75
sticky and here the same thing. 76 76
Because I want these styles to apply only 77 77
if this class is inside of the sticky class. 78 78
Right, so this is then the sticky class. 79 79
And then we have the main nav inside of the sticky class. 80 80
Alright, so the first thing we should 81 81
definitely change is the color. 82 82
Lets set it to 555 , such as the rest of the webpage. 83 83
And we don't need any of this. 84 84
And depending I will leave this for now. 85 85
We can take a look at that later. 86 86
Alright, so it is now at least it's visible now. 87 87
And now we have a problem here with the image, the logo. 88 88
Because it is the white logo, 89 89
and we want the black logo here. 90 90
So what can we do about that? 91 91
The simplest way would be to go back to the HTML file 92 92
and include the black logo in the exact same place. 93 93
And I will duplicate this line. 94 94
And I will explain you what I am doing here in a second. 95 95
So now I want this.. 96 96
class to call logo black. 97 97
And this one will be the black logo. 98 98
Let me see how this is called, 99 99
so this is just logo. 100 100
Alright, so remember this is logo black. 101 101
I need now to format that. 102 102
Easiest way is to make control F or command F, 103 103
and then search for logo simply. 104 104
And let me style logo black in the exact same way. 105 105
But with one difference. 106 106
I want logo black to be hidden. 107 107
And so I say display none. 108 108
So this image will then be not displayed. 109 109
So I Incorporated, but it is not visible 110 110
in the normal state. 111 111
And what I am going to do now, is to go back to our 112 112
navigation and define that if the logo black is inside 113 113
of the sticky navigation then it shall display as a block. 114 114
So it will no longer be hidden. 115 115
Let's see if it works. 116 116
Okay here it is, 117 117
and all we have to do is to hide the white logo, right? 118 118
So again now if the logo is inside of the sticky navigation 119 119
then this one will be hidden by saying display none. 120 120
Pretty easy right? 121 121
So let's see how this works, 122 122
and yeah great. 123 123
So what can be change now? 124 124
Now we want to reduce this space here. 125 125
Between all of this and make the image smaller 126 126
so that we can reduce this. 127 127
So let me see the original version, 128 128
and okay here we have it. 129 129
So the margin top is 55 pixels, which is way too much. 130 130
So I'm going to copy this again, 131 131
and just change what I want to change. 132 132
And I will say maybe 15 pixels to start with. 133 133
Okay much better now. 134 134
Yeah this is much better. 135 135
Now I also want to decrease this logo here right. 136 136
Again I'm gonna search for it. 137 137
Logo black. 138 138
Actually we shouldn't put this here 139 139
because those styles are very different. 140 140
So let me define it like this. 141 141
And here I will say 50 pixels should be enough. 142 142
And here I want just five pixels to the top. 143 143
So let me take a look at this, and here we go. 144 144
So much smaller now, 145 145
and now we maybe need some margin to the bottom as well. 146 146
And then what we want to change here 147 147
is to make this little line here to be all the way down here 148 148
to the white border. 149 149
To the border of this white container. 150 150
And then I also want some shadow here so that we can 151 151
differentiate between this section 152 152
and the rest of the website. 153 153
Okay now, three things to do. 154 154
So here I want the margin top 155 155
and the margin bottom to be five. 156 156
So I just say margin, and five, and zero. 157 157
So as you remember this means five at the top 158 158
and five at the bottom. 159 159
Now let's go back to the navigation here. 160 160
Alright, and in order to increase the spacing between 161 161
that orange line and the text of the navigation links, 162 162
is to increase this painting. 163 163
Start by setting it to 15 pixels. 164 164
And now as I said I want some shadow here on this container. 165 165
So let's say box shadow and we already used that. 166 166
So it's zero on the X axis, 167 167
so in the horizontal. 168 168
Then two pixels in the Y axis, 169 169
so in the vertical. 170 170
And I want two pixels blur. 171 171
And now the color again. 172 172
Let's say we want a very subtle gray here. 173 173
So let's start with white here again, 174 174
and then use the color picker to choose something else. 175 175
This for instance. 176 176
Alright, so this looks good here. 177 177
The image. 178 178
Now we need some more margin between this and the top 179 179
in order to make it centered. 180 180
Right? 181 181
So how do we do that? 182 182
We need some more margin here, let's say 18. 183 183
And then we can increase the painting here to, let's say 16. 184 184
Now it's just you know testing how it works. 185 185
Get rid of those blue boxes here. 186 186
Alright, I think that we already have here what we want. 187 187
And this is cool, right? 188 188
So we have styled this whole thing, 189 189
and now we can use J Query 190 190
to have that effect that I described before. 191 191
And I will actually leave that for the next lecture, 192 192
so that you can take a break if you want. 193 193
And review the code that we written so far. 194 194
So you can do that or you can just come with me, 195 195
and start to write some jQuery.