Adding Sticky Navigation

All right, It's time to use the sticky js plugin. 0:00 Lets start at the sticky.js web site. 0:03 Theres a simple demo. 0:05 Okay, that top sticks and these two buttons stick, and 0:08 the author credit at the bottom sticks. 0:11 Cool, this looks pretty good. 0:13 Now, theres a GitHub repository for this as well. 0:15 This is where you find the files for this plugin and some simple instructions for 0:18 how it works. 0:21 The list of files here show a Readme file, a few demo files, and 0:22 actually there's just one file for this plugin. 0:28 It doesn't use any CSS or images of its own. 0:30 So all you need is one file, jquery.sticky.js. 0:33 Now I've already set up a workspace for this section of the course. 0:37 Click the Launch Workspace button to open it. 0:42 You can also download the projects files for this course and 0:44 use your own text editor to follow along. 0:47 Here is the directory structure for the project at this point. 0:50 There's already a folder for the sticky plugin inside the js folder. 0:54 Here's the plugin file. 0:59 We need to attach it to our pages. 1:00 First I'll open the index.html file. 1:03 I'm going to add the script tag, and 1:06 I'll add it just below the animated transitions plugin. 1:08 Remember, this has to go after the jQuery link, 1:14 since this plugin requires jQuery in order to work. 1:16 I'll add this to the team.html file. 1:21 And the work.html file. 1:29 Let's look at the documentation to see how to use this plugin. 1:37 Well, this is really simple. 1:41 We just need to select the element on the page that we want to stick, and 1:42 call the sticky plugin. 1:46 Looks like we can also set the placement of the sticky item 1:49 with the topSpacing option. 1:52 So 0 means the top of the browser window, I guess. 1:54 Let's try it out. 1:57 Let's first figure out what we want to stick. 1:58 Remember it's that navigation bar, so let's look at our index.html file and 2:01 look at the HTML. 2:06 The header tag near the top of the page looks right. 2:09 Notice that it has a class of header applied to it. 2:12 We could use that class name as a jQuery selector. 2:15 I'll open the main.js file. 2:19 Since all of the pages in this project will share the sticky nav element, 2:21 it's best to put this programming in the same external JavaScript file we used for 2:25 the animation transition. 2:29 This is jQuery's way of selecting that page element. 2:31 It selects an element on the page with the class header. 2:34 We could have added an ID to the tag and used that, #header for example, or 2:37 even used the tag name, header. 2:42 That would work, as long as there weren't any other header tags. 2:44 Let's just stick with the class name. 2:48 Now we call the Sticky plugin. 2:51 Let's see how it works. 2:53 I'll save the files, and preview the workspace. 2:55 Okay, it sticks, but as we scroll, the content on the page appears underneath it. 2:59 We can fix that with some CSS. 3:05 I'll open the CSS file, it's called main.css, in the CSS folder. 3:06 I'll add a style for the header class at the end of this file. 3:14 This just sets the background to white. 3:21 That way, anything underneath it will not show through. 3:24 Let's look, save the files and preview the workspace. 3:27 All right, it's looking pretty good. 3:31 We can also add a style for when the header sticks. 3:33 Lets use the Chrome Developers tools to see what the plugin is doing to our HTML 3:36 under the hood. 3:41 Just right-click, or Ctrl+click for Macs, 3:43 on the navigation bar and select Inspect Element. 3:45 What we see here is not the actual HTML that we created, but 3:53 the HTML that's rendered by Chrome and 3:57 it's the final result of any kind of additions that the plugin has made. 3:59 You can see that the plugin adds a div tag 4:05 that wraps around the content that we wish to stick to the top of the page. 4:08 That div has a class of is-sticky. 4:12 Notice that that class name disappears when I scroll back to the top of the page. 4:15 All right, we can create a descendant selector to format that. 4:22 That'll change the background color to black. 4:27 To make this even cooler, let's add a CSS transition effect. 4:34 This code goes in the .header style. 4:39 See the teacher's notes for links to CSS courses on Treehouse 4:42 that teach how to use CSS transitions if you're not sure how they work. 4:45 Okay, let's check it out. 4:49 Save the files, and preview the workspace. 4:51 Cool! 4:55 Now, you can take this a lot farther, by creating new styles for 4:57 the nav buttons, the logo, and so on. 5:00 For example, to change the look of the navigation buttons, 5:03 you can create a style named .is-sticky header a. 5:06 This is another descendant selector that selects all links inside the header, 5:11 which is inside of an element with the is-sticky class. 5:16 All right, in the next video we'll look at plugin events, and 5:20 how you can write your own programming to respond to actions a plugin takes. 5:23