Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
The Plugin Challenge2:05 with Dave McFarland
Here'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.
- On the work.html file, stick the "Want us to work on your project?" sentence when it is scrolled to the top of the browser window.
- Add an email link after the "Want us to work on your project?" when that sentence is stuck to the top of the page.
- Remove that email link when the sentence is "unstuck."
- Make CSS change to make sure content doesn't appear underneath the sentence.
Hopefully you're getting the hang of jQuery plugins.
Most of them, like the Sticky.JS plugin, are pretty easy to add to a page.
The real fun comes when you start to experiment with the plugin's options and
I'd like you to modify how this plugin works.
I'm going to give you a few tasks to try out yourself.
Let me show you what I want.
The sticky.js plugin let's you stick
more than one element to the top of the browser window.
I want you to try to add another sticky element to the work.html file.
When the user scrolls the page so that the want us to work on your project text
reaches near the top, it should stick in place.
In addition, use the sitcky.js events so
that an e-mail link with the text e-mail us appears when the text sticks and
then disappears when the user scrolls back to the top of the page.
To do this, you'll need to identify that particular chunk of text in the HTML for
the work.html file.
You also need to pass an object, with top spacing property to set a pixel value.
That's where in the window as measured from the top of the browser
the element should stick.
You'll need to figure out a value that places this below the navigation bar.
Otherwise, this text will simply be on top of the navigation bar, and
you won't be able to see it.
say you wanted the header to stick 20 pixels from the top of the browser window.
You'd select that header, then pass an object to it as an argument,
with the topSpacing property set to 20, like this.
Now this value is just a number.
Don't add px, as in pixels, to the end.
In addition this code sets the header position.
You need to figure out how to do this with the, want us to work on your project text,
In other words, you can't just copy this code.
It won't work.
Finally, you'll probably need to make a CSS change like we did for
the header, in order to prevent content from showing through, and
underneath our newly stuck element.
In the next video, I'll step you through the solution.
You need to sign up for Treehouse in order to download course files.Sign up