Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using jQuery Plugins

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Plugin Challenge

2: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.

Challenge Tasks

  1. 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.
  2. Add an email link after the "Want us to work on your project?" when that sentence is stuck to the top of the page.
  3. Remove that email link when the sentence is "unstuck."
  4. Make CSS change to make sure content doesn't appear underneath the sentence.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up