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.