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
You'll be adding a "sticky" navigation bar to the site we've been working on. Let's take a look at what you'll be building in this section of the course.
Resources
Related Treehouse Videos
[MUSIC]
0:00
Welcome back.
0:04
Now that you have a basic
understanding of jQuery plugins,
0:05
let's look at another
plugin called StickyJS.
0:09
It lets you stick any page element
to the top of a browser window.
0:12
It's great for a navigation bar that you
want to remain visible when a visitor
0:16
scrolls down a page, or for keeping
an important announcement ever-present.
0:20
Let's take a look at this plugin.
0:25
The StickyJS plugin is simple and useful.
0:27
When a user scrolls the page,
0:30
you can lock an element into place
at the top of the browser window.
0:32
This is what we'll be adding to our
project in this section of the course.
0:36
When I scroll down the page,
this navigation bar will stick, and
0:39
stay in view.
0:43
Using CSS, you can even change
the appearance of the fixed element.
0:44
A class is applied to the element when
it's fixed, so you can create a style that
0:48
changes the look of the element when
it's stuck to the top of the page.
0:52
You can even lock multiple
elements into place.
0:56
Notice that on this page, the want
us to work on your project paragraph
0:59
sticks just below the navigation bar.
1:03
You'll also notice that the content
changes when it sticks.
1:06
A new Email us link appears
when the paragraph sticks, but
1:09
disappears when you scroll
back to the top of the page.
1:13
In this section of the course, I'll not
only show you how to use this plugin, but
1:17
introduce plugin events, so
that you can add programming that responds
1:21
to changes that the plugin
makes to the page.
1:26
Let's get started.
1:29
You need to sign up for Treehouse in order to download course files.
Sign up