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

This Section's Project

1:30 with Dave McFarland

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 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

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

    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