Voiceover: Hi. In this lecture we'll start to get our
hands dirty with jQuery.
We're going to build
a very simple so called sticky navigation.
And this is great to show you the very basics of jQuery.
So I will start off by showing you what we want to achieve.
So here in the normal state we want the navigation to show
in a normal way so here in the header.
But then as we go down here we don't want this to happen.
So we want our navigation to show up here.
With this little effect.
So that we can see the navigation always
and not just when we're in the header.
And then as we go back to the header,
then the navigation disappears.
So I'll show you again.
So navigation comes in once we get passed the header.
So we will use jQuery to add a class to the north element
every time we leave the header.
So at this point here.
So the first thing we need to do in order to do that
is to actually format this navigation in the sticky state.
Let's say so.
So this is the sticky navigation.
So, here is the north element
and this is where we will use jQuery
to add the sticky class.
So lets go to our CSS file and start by defining that class.
So where's the navigation, okay here it is.
Let me just leave some comment here.
So in fact your going to learn some more CSS here.
Maybe more CSS than jQuery,
but you know we always use a mixture of both languages.
So this is the main navi.
And down here we will now do the sticky navi.
So just a simple class.
In fact I will now just for testing purposes
add this class here so that we can see
what we're styling actually.
And the first thing we need to do is define this position.
So far we've had absolute and relative positioning, right?
And now you get to learn a new one which is fixed.
And with this property the navigation stays always
at the same point irrespective of our scrolling.
And we want this to start at the top,
and on the left corner.
So the top left corner.
So we have to define top zero, and left zero.
And we want it to be 100 percent wide.
So as you saw in that image I showed you before.
We want it to occupy the whole browser width.
And we want it to be wide.
So background color...
color...
white,
but with a little transparency.
So that we can see the content beneath it.
I'll start with 098.
This is almost no opacity.
Now let's have a look at this.
Have to open our live connection here.
Alright, this is how it looks like so far.
And we can barely see these links here,
but they are there.
But of course with the white color we defined before.
And the logo is here, so everything is here.
But now we need to style this.
But in fact it's already a sticky, right?
So let's change a couple of things here.
And I will start off by changing those things here.
So the first thing is we want to change
some of these things.
So I will copy everything then delete things I don't want.
And now I have to say...
sticky and here the same thing.
Because I want these styles to apply only
if this class is inside of the sticky class.
Right, so this is then the sticky class.
And then we have the main nav inside of the sticky class.
Alright, so the first thing we should
definitely change is the color.
Lets set it to 555 , such as the rest of the webpage.
And we don't need any of this.
And depending I will leave this for now.
We can take a look at that later.
Alright, so it is now at least it's visible now.
And now we have a problem here with the image, the logo.
Because it is the white logo,
and we want the black logo here.
So what can we do about that?
The simplest way would be to go back to the HTML file
and include the black logo in the exact same place.
And I will duplicate this line.
And I will explain you what I am doing here in a second.
So now I want this..
class to call logo black.
And this one will be the black logo.
Let me see how this is called,
so this is just logo.
Alright, so remember this is logo black.
I need now to format that.
Easiest way is to make control F or command F,
and then search for logo simply.
And let me style logo black in the exact same way.
But with one difference.
I want logo black to be hidden.
And so I say display none.
So this image will then be not displayed.
So I Incorporated, but it is not visible
in the normal state.
And what I am going to do now, is to go back to our
navigation and define that if the logo black is inside
of the sticky navigation then it shall display as a block.
So it will no longer be hidden.
Let's see if it works.
Okay here it is,
and all we have to do is to hide the white logo, right?
So again now if the logo is inside of the sticky navigation
then this one will be hidden by saying display none.
Pretty easy right?
So let's see how this works,
and yeah great.
So what can be change now?
Now we want to reduce this space here.
Between all of this and make the image smaller
so that we can reduce this.
So let me see the original version,
and okay here we have it.
So the margin top is 55 pixels, which is way too much.
So I'm going to copy this again,
and just change what I want to change.
And I will say maybe 15 pixels to start with.
Okay much better now.
Yeah this is much better.
Now I also want to decrease this logo here right.
Again I'm gonna search for it.
Logo black.
Actually we shouldn't put this here
because those styles are very different.
So let me define it like this.
And here I will say 50 pixels should be enough.
And here I want just five pixels to the top.
So let me take a look at this, and here we go.
So much smaller now,
and now we maybe need some margin to the bottom as well.
And then what we want to change here
is to make this little line here to be all the way down here
to the white border.
To the border of this white container.
And then I also want some shadow here so that we can
differentiate between this section
and the rest of the website.
Okay now, three things to do.
So here I want the margin top
and the margin bottom to be five.
So I just say margin, and five, and zero.
So as you remember this means five at the top
and five at the bottom.
Now let's go back to the navigation here.
Alright, and in order to increase the spacing between
that orange line and the text of the navigation links,
is to increase this painting.
Start by setting it to 15 pixels.
And now as I said I want some shadow here on this container.
So let's say box shadow and we already used that.
So it's zero on the X axis,
so in the horizontal.
Then two pixels in the Y axis,
so in the vertical.
And I want two pixels blur.
And now the color again.
Let's say we want a very subtle gray here.
So let's start with white here again,
and then use the color picker to choose something else.
This for instance.
Alright, so this looks good here.
The image.
Now we need some more margin between this and the top
in order to make it centered.
Right?
So how do we do that?
We need some more margin here, let's say 18.
And then we can increase the painting here to, let's say 16.
Now it's just you know testing how it works.
Get rid of those blue boxes here.
Alright, I think that we already have here what we want.
And this is cool, right?
So we have styled this whole thing,
and now we can use J Query
to have that effect that I described before.
And I will actually leave that for the next lecture,
so that you can take a break if you want.
And review the code that we written so far.
So you can do that or you can just come with me,
and start to write some jQuery.