1 00:00:00,372 --> 00:00:03,090 All right, It's time to use the sticky js plugin. 2 00:00:03,090 --> 00:00:05,900 Lets start at the sticky.js web site. 3 00:00:05,900 --> 00:00:06,930 Theres a simple demo. 4 00:00:08,080 --> 00:00:11,155 Okay, that top sticks and these two buttons stick, and 5 00:00:11,155 --> 00:00:13,540 the author credit at the bottom sticks. 6 00:00:13,540 --> 00:00:15,410 Cool, this looks pretty good. 7 00:00:15,410 --> 00:00:18,020 Now, theres a GitHub repository for this as well. 8 00:00:18,020 --> 00:00:21,580 This is where you find the files for this plugin and some simple instructions for 9 00:00:21,580 --> 00:00:22,890 how it works. 10 00:00:22,890 --> 00:00:28,120 The list of files here show a Readme file, a few demo files, and 11 00:00:28,120 --> 00:00:30,790 actually there's just one file for this plugin. 12 00:00:30,790 --> 00:00:33,960 It doesn't use any CSS or images of its own. 13 00:00:33,960 --> 00:00:37,890 So all you need is one file, jquery.sticky.js. 14 00:00:37,890 --> 00:00:42,080 Now I've already set up a workspace for this section of the course. 15 00:00:42,080 --> 00:00:44,530 Click the Launch Workspace button to open it. 16 00:00:44,530 --> 00:00:47,280 You can also download the projects files for this course and 17 00:00:47,280 --> 00:00:49,220 use your own text editor to follow along. 18 00:00:50,850 --> 00:00:54,230 Here is the directory structure for the project at this point. 19 00:00:54,230 --> 00:00:57,720 There's already a folder for the sticky plugin inside the js folder. 20 00:00:59,390 --> 00:01:00,900 Here's the plugin file. 21 00:01:00,900 --> 00:01:03,100 We need to attach it to our pages. 22 00:01:03,100 --> 00:01:05,450 First I'll open the index.html file. 23 00:01:06,940 --> 00:01:08,617 I'm going to add the script tag, and 24 00:01:08,617 --> 00:01:11,284 I'll add it just below the animated transitions plugin. 25 00:01:14,045 --> 00:01:16,904 Remember, this has to go after the jQuery link, 26 00:01:16,904 --> 00:01:19,990 since this plugin requires jQuery in order to work. 27 00:01:21,420 --> 00:01:23,420 I'll add this to the team.html file. 28 00:01:29,248 --> 00:01:31,143 And the work.html file. 29 00:01:37,125 --> 00:01:40,100 Let's look at the documentation to see how to use this plugin. 30 00:01:41,790 --> 00:01:42,950 Well, this is really simple. 31 00:01:42,950 --> 00:01:46,890 We just need to select the element on the page that we want to stick, and 32 00:01:46,890 --> 00:01:49,010 call the sticky plugin. 33 00:01:49,010 --> 00:01:52,070 Looks like we can also set the placement of the sticky item 34 00:01:52,070 --> 00:01:54,230 with the topSpacing option. 35 00:01:54,230 --> 00:01:57,240 So 0 means the top of the browser window, I guess. 36 00:01:57,240 --> 00:01:58,645 Let's try it out. 37 00:01:58,645 --> 00:02:01,780 Let's first figure out what we want to stick. 38 00:02:01,780 --> 00:02:06,240 Remember it's that navigation bar, so let's look at our index.html file and 39 00:02:06,240 --> 00:02:07,170 look at the HTML. 40 00:02:09,010 --> 00:02:12,040 The header tag near the top of the page looks right. 41 00:02:12,040 --> 00:02:14,580 Notice that it has a class of header applied to it. 42 00:02:15,670 --> 00:02:19,000 We could use that class name as a jQuery selector. 43 00:02:19,000 --> 00:02:21,097 I'll open the main.js file. 44 00:02:21,097 --> 00:02:25,047 Since all of the pages in this project will share the sticky nav element, 45 00:02:25,047 --> 00:02:29,515 it's best to put this programming in the same external JavaScript file we used for 46 00:02:29,515 --> 00:02:31,490 the animation transition. 47 00:02:31,490 --> 00:02:34,350 This is jQuery's way of selecting that page element. 48 00:02:34,350 --> 00:02:37,370 It selects an element on the page with the class header. 49 00:02:37,370 --> 00:02:42,063 We could have added an ID to the tag and used that, #header for example, or 50 00:02:42,063 --> 00:02:44,690 even used the tag name, header. 51 00:02:44,690 --> 00:02:48,060 That would work, as long as there weren't any other header tags. 52 00:02:48,060 --> 00:02:49,490 Let's just stick with the class name. 53 00:02:51,050 --> 00:02:52,530 Now we call the Sticky plugin. 54 00:02:53,840 --> 00:02:55,110 Let's see how it works. 55 00:02:55,110 --> 00:02:57,591 I'll save the files, and preview the workspace. 56 00:02:59,815 --> 00:03:05,220 Okay, it sticks, but as we scroll, the content on the page appears underneath it. 57 00:03:05,220 --> 00:03:06,720 We can fix that with some CSS. 58 00:03:06,720 --> 00:03:12,360 I'll open the CSS file, it's called main.css, in the CSS folder. 59 00:03:14,100 --> 00:03:17,256 I'll add a style for the header class at the end of this file. 60 00:03:21,396 --> 00:03:24,250 This just sets the background to white. 61 00:03:24,250 --> 00:03:27,390 That way, anything underneath it will not show through. 62 00:03:27,390 --> 00:03:29,790 Let's look, save the files and preview the workspace. 63 00:03:31,410 --> 00:03:33,060 All right, it's looking pretty good. 64 00:03:33,060 --> 00:03:36,210 We can also add a style for when the header sticks. 65 00:03:36,210 --> 00:03:41,020 Lets use the Chrome Developers tools to see what the plugin is doing to our HTML 66 00:03:41,020 --> 00:03:41,570 under the hood. 67 00:03:43,210 --> 00:03:45,818 Just right-click, or Ctrl+click for Macs, 68 00:03:45,818 --> 00:03:48,629 on the navigation bar and select Inspect Element. 69 00:03:53,085 --> 00:03:57,115 What we see here is not the actual HTML that we created, but 70 00:03:57,115 --> 00:03:59,830 the HTML that's rendered by Chrome and 71 00:03:59,830 --> 00:04:05,620 it's the final result of any kind of additions that the plugin has made. 72 00:04:05,620 --> 00:04:08,120 You can see that the plugin adds a div tag 73 00:04:08,120 --> 00:04:12,230 that wraps around the content that we wish to stick to the top of the page. 74 00:04:12,230 --> 00:04:14,565 That div has a class of is-sticky. 75 00:04:15,850 --> 00:04:19,920 Notice that that class name disappears when I scroll back to the top of the page. 76 00:04:22,952 --> 00:04:27,110 All right, we can create a descendant selector to format that. 77 00:04:27,110 --> 00:04:29,232 That'll change the background color to black. 78 00:04:34,334 --> 00:04:38,190 To make this even cooler, let's add a CSS transition effect. 79 00:04:39,440 --> 00:04:42,130 This code goes in the .header style. 80 00:04:42,130 --> 00:04:45,600 See the teacher's notes for links to CSS courses on Treehouse 81 00:04:45,600 --> 00:04:49,920 that teach how to use CSS transitions if you're not sure how they work. 82 00:04:49,920 --> 00:04:51,320 Okay, let's check it out. 83 00:04:51,320 --> 00:04:53,556 Save the files, and preview the workspace. 84 00:04:55,724 --> 00:04:57,170 Cool! 85 00:04:57,170 --> 00:05:00,220 Now, you can take this a lot farther, by creating new styles for 86 00:05:00,220 --> 00:05:03,380 the nav buttons, the logo, and so on. 87 00:05:03,380 --> 00:05:06,220 For example, to change the look of the navigation buttons, 88 00:05:06,220 --> 00:05:11,700 you can create a style named .is-sticky header a. 89 00:05:11,700 --> 00:05:16,920 This is another descendant selector that selects all links inside the header, 90 00:05:16,920 --> 00:05:20,660 which is inside of an element with the is-sticky class. 91 00:05:20,660 --> 00:05:23,640 All right, in the next video we'll look at plugin events, and 92 00:05:23,640 --> 00:05:27,800 how you can write your own programming to respond to actions a plugin takes.