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. 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
You need to sign up for Treehouse in order to download course files.Sign up