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