"Ruby Operators and Control Structures" was retired on November 27, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Bootstrap Basics!
You have completed Bootstrap Basics!
Preview
ScrollySpy is an interactive JavaScript plugin that highlights the active navigation links. It automatically updates your navigation links based on a user's scroll position.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up