Preview
Video Player
00:00
00:00
Adding Sticky Navigation
5:28Let's look at the Sticky.js web site, download the files and add the plugin to our site.
All right,
It's time to use the sticky js plugin.
0:00
Lets start at the sticky.js web site.
0:03
Theres a simple demo.
0:05
Okay, that top sticks and
these two buttons stick, and
0:08
the author credit at the bottom sticks.
0:11
Cool, this looks pretty good.
0:13
Now, theres a GitHub repository for
this as well.
0:15
This is where you find the files for this
plugin and some simple instructions for
0:18
how it works.
0:21
The list of files here show a Readme file,
a few demo files, and
0:22
actually there's just one file for
this plugin.
0:28
It doesn't use any CSS or
images of its own.
0:30
So all you need is one file,
jquery.sticky.js.
0:33
Now I've already set up a workspace for
this section of the course.
0:37
Click the Launch Workspace
button to open it.
0:42
You can also download the projects
files for this course and
0:44
use your own text editor to follow along.
0:47
Here is the directory structure for
the project at this point.
0:50
There's already a folder for
the sticky plugin inside the js folder.
0:54
Here's the plugin file.
0:59
We need to attach it to our pages.
1:00
First I'll open the index.html file.
1:03
I'm going to add the script tag, and
1:06
I'll add it just below
the animated transitions plugin.
1:08
Remember, this has to go
after the jQuery link,
1:14
since this plugin requires
jQuery in order to work.
1:16
I'll add this to the team.html file.
1:21
And the work.html file.
1:29
Let's look at the documentation
to see how to use this plugin.
1:37
Well, this is really simple.
1:41
We just need to select the element on
the page that we want to stick, and
1:42
call the sticky plugin.
1:46
Looks like we can also set
the placement of the sticky item
1:49
with the topSpacing option.
1:52
So 0 means the top of the browser window,
I guess.
1:54
Let's try it out.
1:57
Let's first figure out
what we want to stick.
1:58
Remember it's that navigation bar, so
let's look at our index.html file and
2:01
look at the HTML.
2:06
The header tag near the top
of the page looks right.
2:09
Notice that it has a class
of header applied to it.
2:12
We could use that class
name as a jQuery selector.
2:15
I'll open the main.js file.
2:19
Since all of the pages in this project
will share the sticky nav element,
2:21
it's best to put this programming in the
same external JavaScript file we used for
2:25
the animation transition.
2:29
This is jQuery's way of
selecting that page element.
2:31
It selects an element on
the page with the class header.
2:34
We could have added an ID to the tag and
used that, #header for example, or
2:37
even used the tag name, header.
2:42
That would work, as long as there
weren't any other header tags.
2:44
Let's just stick with the class name.
2:48
Now we call the Sticky plugin.
2:51
Let's see how it works.
2:53
I'll save the files, and
preview the workspace.
2:55
Okay, it sticks, but as we scroll, the
content on the page appears underneath it.
2:59
We can fix that with some CSS.
3:05
I'll open the CSS file,
it's called main.css, in the CSS folder.
3:06
I'll add a style for
the header class at the end of this file.
3:14
This just sets the background to white.
3:21
That way, anything underneath
it will not show through.
3:24
Let's look, save the files and
preview the workspace.
3:27
All right, it's looking pretty good.
3:31
We can also add a style for
when the header sticks.
3:33
Lets use the Chrome Developers tools to
see what the plugin is doing to our HTML
3:36
under the hood.
3:41
Just right-click, or Ctrl+click for Macs,
3:43
on the navigation bar and
select Inspect Element.
3:45
What we see here is not the actual
HTML that we created, but
3:53
the HTML that's rendered by Chrome and
3:57
it's the final result of any kind of
additions that the plugin has made.
3:59
You can see that the plugin adds a div tag
4:05
that wraps around the content that we
wish to stick to the top of the page.
4:08
That div has a class of is-sticky.
4:12
Notice that that class name disappears
when I scroll back to the top of the page.
4:15
All right, we can create a descendant
selector to format that.
4:22
That'll change the background
color to black.
4:27
To make this even cooler,
let's add a CSS transition effect.
4:34
This code goes in the .header style.
4:39
See the teacher's notes for
links to CSS courses on Treehouse
4:42
that teach how to use CSS transitions
if you're not sure how they work.
4:45
Okay, let's check it out.
4:49
Save the files, and preview the workspace.
4:51
Cool!
4:55
Now, you can take this a lot farther,
by creating new styles for
4:57
the nav buttons, the logo, and so on.
5:00
For example, to change the look
of the navigation buttons,
5:03
you can create a style
named .is-sticky header a.
5:06
This is another descendant selector that
selects all links inside the header,
5:11
which is inside of an element
with the is-sticky class.
5:16
All right, in the next video
we'll look at plugin events, and
5:20
how you can write your own programming
to respond to actions a plugin takes.
5:23