Preview
Video Player
00:00
00:00
The Plugin Challenge
2:05Here's a challenge: add another sticky element to the site. In addition to making the navigation bar stick, you'll make another page element stick as the user scrolls the page.
Hopefully you're getting
the hang of jQuery plugins.
0:00
Most of them, like the Sticky.JS plugin,
are pretty easy to add to a page.
0:03
The real fun comes when you start to
experiment with the plugin's options and
0:08
events.
0:12
I'd like you to modify
how this plugin works.
0:13
I'm going to give you a few
tasks to try out yourself.
0:16
Let me show you what I want.
0:19
The sticky.js plugin let's you stick
0:21
more than one element to
the top of the browser window.
0:24
I want you to try to add another
sticky element to the work.html file.
0:27
When the user scrolls the page so that
the want us to work on your project text
0:31
reaches near the top,
it should stick in place.
0:36
In addition, use the sitcky.js events so
0:39
that an e-mail link with the text e-mail
us appears when the text sticks and
0:42
then disappears when the user
scrolls back to the top of the page.
0:47
To do this, you'll need to identify that
particular chunk of text in the HTML for
0:51
the work.html file.
0:56
You also need to pass an object, with top
spacing property to set a pixel value.
0:59
That's where in the window as
measured from the top of the browser
1:05
the element should stick.
1:09
You'll need to figure out a value that
places this below the navigation bar.
1:11
Otherwise, this text will simply be
on top of the navigation bar, and
1:15
you won't be able to see it.
1:19
For example,
1:21
say you wanted the header to stick 20
pixels from the top of the browser window.
1:22
You'd select that header,
then pass an object to it as an argument,
1:26
with the topSpacing property set to 20,
like this.
1:30
Now this value is just a number.
1:35
Don't add px, as in pixels, to the end.
1:37
In addition this code
sets the header position.
1:40
You need to figure out how to do this with
the, want us to work on your project text,
1:43
instead.
1:48
In other words,
you can't just copy this code.
1:49
It won't work.
1:51
Finally, you'll probably need to
make a CSS change like we did for
1:52
the header, in order to prevent
content from showing through, and
1:56
underneath our newly stuck element.
2:00
Good Luck.
2:02
In the next video,
I'll step you through the solution.
2:03