1
00:00:00,800 --> 00:00:03,100
All right, so great work so far.

2
00:00:03,100 --> 00:00:06,800
All of the site's content and
components are in place.

3
00:00:06,800 --> 00:00:10,620
Now our site is one long, scrollable page.

4
00:00:10,620 --> 00:00:14,910
Currently, the navigation doesn't let
visitors know where they are on the page.

5
00:00:14,910 --> 00:00:19,020
Even when you click a link to
navigate to a section like Speakers,

6
00:00:19,020 --> 00:00:22,640
the nav link remains dim,
with no visual feedback.

7
00:00:22,640 --> 00:00:26,250
Well Bootstrap has a simple solution for
this called Scrollspy.

8
00:00:27,260 --> 00:00:30,550
Scrollspy is an interactive
JavaScript plugin

9
00:00:30,550 --> 00:00:33,730
that highlights the active
navigation links.

10
00:00:33,730 --> 00:00:38,194
It automatically updates your nav links
based on a user's scroll position.

11
00:00:38,194 --> 00:00:41,484
For example,
in the provided Scrollspy demo,

12
00:00:41,484 --> 00:00:46,100
notice how the nav links and
the nav change based on where I scroll.

13
00:00:47,180 --> 00:00:51,040
Adding Scrollspy to your
site's navigation is simple.

14
00:00:51,040 --> 00:00:56,240
First, you add a data-spy
attribute to the body of the page.

15
00:00:56,240 --> 00:01:00,210
Then add the data-target
attribute with the id, or

16
00:01:00,210 --> 00:01:03,140
class name of your navigation component.

17
00:01:03,140 --> 00:01:08,050
To start, I'll copy the necessary
attributes from the docs,

18
00:01:08,050 --> 00:01:10,700
and paste them inside my opening body tag.

19
00:01:12,720 --> 00:01:18,640
So the nav component wrapper
has a class of navbar.

20
00:01:18,640 --> 00:01:24,480
So I'll write .navbar as the value for
data-target.

21
00:01:24,480 --> 00:01:27,240
And notice how I included
the period in the class.

22
00:01:27,240 --> 00:01:30,960
If you don't include the period,
Scrollspy will not work in your page.

23
00:01:32,480 --> 00:01:36,660
So the first link in the navigation
is Home, which links to or

24
00:01:36,660 --> 00:01:40,750
targets a section of
the page with an id of home.

25
00:01:40,750 --> 00:01:46,033
So, let's give our top-most element,
the body tag, the id home.

26
00:01:50,045 --> 00:01:51,720
Give this a Save.

27
00:01:51,720 --> 00:01:55,340
And since we're viewing
the top section of the page,

28
00:01:55,340 --> 00:01:58,030
notice how the Home link turns active.

29
00:01:58,030 --> 00:02:03,260
Now let's the rest of the id targets for
about speakers and schedule.

30
00:02:03,260 --> 00:02:04,768
And just like the Home id,

31
00:02:04,768 --> 00:02:08,410
the ids should match what's
defined in the links href values.

32
00:02:10,010 --> 00:02:14,524
So I'll scroll down to
the about section and

33
00:02:14,524 --> 00:02:18,803
give the about contents row the id about.

34
00:02:23,114 --> 00:02:27,051
We already assigned an id to
the speaker setting earlier, so

35
00:02:27,051 --> 00:02:29,840
all that's left is the schedule section.

36
00:02:29,840 --> 00:02:34,840
So I'll scroll down to the schedule,
h1, and

37
00:02:34,840 --> 00:02:37,596
give it an id of schedule.

38
00:02:43,725 --> 00:02:48,500
So now, scrolling the page automatically
updates the active link based on

39
00:02:48,500 --> 00:02:50,730
where you are on the page.

40
00:02:50,730 --> 00:02:51,950
So when you scroll or

41
00:02:51,950 --> 00:02:56,820
click to navigate to the About
content the About link turns active.

42
00:02:56,820 --> 00:03:04,550
Scrolling to Speakers makes the Speakers
link active and so on, good.

43
00:03:04,550 --> 00:03:07,390
Now, to make Scrollspy even more precise,

44
00:03:07,390 --> 00:03:12,650
you can adjust the scroll offset
using the data-offset attribute.

45
00:03:12,650 --> 00:03:17,215
For example, notice how the About
link doesn't turn active

46
00:03:17,215 --> 00:03:20,719
immediately upon scrolling
to the headings.

47
00:03:20,719 --> 00:03:24,380
The link turns active when
you scroll past the headings.

48
00:03:24,380 --> 00:03:27,710
And the same happens in the Speakers and
Schedule sections.

49
00:03:29,420 --> 00:03:35,380
So, the data-offset attribute, offsets the
scroll target based on the value you set.

50
00:03:35,380 --> 00:03:40,810
In other words, the value you
provide specifies the position

51
00:03:40,810 --> 00:03:43,000
above the target that
the user must scroll to.

52
00:03:44,890 --> 00:03:49,912
So, for example, a data-offset
value of 100 means that the nav

53
00:03:49,912 --> 00:03:55,917
link will activate when the user scrolls
within 100 pixels above the target.

54
00:03:58,399 --> 00:04:02,822
So now, the nav links turn active when
you scroll to each section's heading.

55
00:04:04,318 --> 00:04:04,818
Perfect.

56
00:04:06,570 --> 00:04:10,250
All right, so you finished one of
the most important parts of this course,

57
00:04:10,250 --> 00:04:12,590
in learning about Bootstrap components.

58
00:04:12,590 --> 00:04:14,755
There's one more section to go,
and it's a good one.

59
00:04:14,755 --> 00:04:19,583
So up next you'll learn how to style one
of the most important features of any site

60
00:04:19,583 --> 00:04:21,360
or web application, forms.