Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's look at the Sticky.js web site, download the files and add the plugin to our site.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up