Preview
Video Player
00:00
00:00
Using ScrollSpy to Highlight Nav Links
4:22ScrollySpy is an interactive JavaScript plugin that highlights the active navigation links. It automatically updates your navigation links based on a user's scroll position.
All right, so great work so far.
0:00
All of the site's content and
components are in place.
0:03
Now our site is one long, scrollable page.
0:06
Currently, the navigation doesn't let
visitors know where they are on the page.
0:10
Even when you click a link to
navigate to a section like Speakers,
0:14
the nav link remains dim,
with no visual feedback.
0:19
Well Bootstrap has a simple solution for
this called Scrollspy.
0:22
Scrollspy is an interactive
JavaScript plugin
0:27
that highlights the active
navigation links.
0:30
It automatically updates your nav links
based on a user's scroll position.
0:33
For example,
in the provided Scrollspy demo,
0:38
notice how the nav links and
the nav change based on where I scroll.
0:41
Adding Scrollspy to your
site's navigation is simple.
0:47
First, you add a data-spy
attribute to the body of the page.
0:51
Then add the data-target
attribute with the id, or
0:56
class name of your navigation component.
1:00
To start, I'll copy the necessary
attributes from the docs,
1:03
and paste them inside my opening body tag.
1:08
So the nav component wrapper
has a class of navbar.
1:12
So I'll write .navbar as the value for
data-target.
1:18
And notice how I included
the period in the class.
1:24
If you don't include the period,
Scrollspy will not work in your page.
1:27
So the first link in the navigation
is Home, which links to or
1:32
targets a section of
the page with an id of home.
1:36
So, let's give our top-most element,
the body tag, the id home.
1:40
Give this a Save.
1:50
And since we're viewing
the top section of the page,
1:51
notice how the Home link turns active.
1:55
Now let's the rest of the id targets for
about speakers and schedule.
1:58
And just like the Home id,
2:03
the ids should match what's
defined in the links href values.
2:04
So I'll scroll down to
the about section and
2:10
give the about contents row the id about.
2:14
We already assigned an id to
the speaker setting earlier, so
2:23
all that's left is the schedule section.
2:27
So I'll scroll down to the schedule,
h1, and
2:29
give it an id of schedule.
2:34
So now, scrolling the page automatically
updates the active link based on
2:43
where you are on the page.
2:48
So when you scroll or
2:50
click to navigate to the About
content the About link turns active.
2:51
Scrolling to Speakers makes the Speakers
link active and so on, good.
2:56
Now, to make Scrollspy even more precise,
3:04
you can adjust the scroll offset
using the data-offset attribute.
3:07
For example, notice how the About
link doesn't turn active
3:12
immediately upon scrolling
to the headings.
3:17
The link turns active when
you scroll past the headings.
3:20
And the same happens in the Speakers and
Schedule sections.
3:24
So, the data-offset attribute, offsets the
scroll target based on the value you set.
3:29
In other words, the value you
provide specifies the position
3:35
above the target that
the user must scroll to.
3:40
So, for example, a data-offset
value of 100 means that the nav
3:44
link will activate when the user scrolls
within 100 pixels above the target.
3:49
So now, the nav links turn active when
you scroll to each section's heading.
3:58
Perfect.
4:04
All right, so you finished one of
the most important parts of this course,
4:06
in learning about Bootstrap components.
4:10
There's one more section to go,
and it's a good one.
4:12
So up next you'll learn how to style one
of the most important features of any site
4:14
or web application, forms.
4:19