Bootstrap scrollspy Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 47 of bootstrap tutorial in
this video we'll discuss the bootstrap
scroll spy plugin this scroll spy plugin
automatically highlights the navigation
links based on the scroll position to
indicate where the user is currently on
the page so here is what we want to do
on this page we are going to have few
images like this at the top we have
these navigation links as we scroll down
the page to view these images we want
the respective navigation links within
this navbar
to be highlighted automatically let's
see how to achieve this using the scroll
spy plugin let's flip to visual studio
what we've got here at the moment is
within the images folder we've got five
images and within the body section we've
got a development with class container
inside this we have another development
I have given it an idea of div desert we
also have applied this custom style
class div style this class is present in
this stylesheet custom styles dot CSS if
we look at the definition of this class
all we are doing is applying 40 pixels
padding at the top and then we have this
h1 element which basically contains the
name of the image that we are displaying
using the image element here notice this
image element is pointing to the desert
image within the images folder and we
are also using image responsive class on
this image element to make the image
responsive we also have for such other
developments here each pointing to a
different image so this development is
pointing to lighthouse this one is
pointing to tulips this one to jellyfish
and finally this one to penguins so if
we view this HTML in the browser this is
how it looks like at the moment so we've
got those five images right here so in
addition to these images we also want
these navigation links at the top we
discuss now bar component in part 28 of
this video series I've copied the HTML
that we discussed in part 28 and I'm
going to paste that HTML just about this
container div I am NOT going to go over
this HTML because we discussed this in
detail in part 28 so
save the changes now when we reload this
page notice we get the navigation bar at
the top we don't need the search text
box submit button and the subscribe link
here so let's remove some of the HTML
I'm going to delete this form element
and this unordered list so let's delete
those two elements save our changes
reload our webpage now we only have
these navigation links now we want this
navbar to be aligned with the rest of
the content on the page so what I'm
going to do is place these two
developments this one and this one
inside another development with class
container so let's create a development
with class container and then move this
closing div right here so now these two
developments are present inside a
container let's save our changes reload
our web page now notice the navbar is
aligned with the content now we want a
different color scheme so we want this
black color now at the moment we are
using now bar default class instead of
that I'm going to use now bar inverse
class let's reload this page so we get a
different color scheme and at the moment
when we scroll down look at that the now
bar Scrolls along with the page we don't
want that we want this navigation bar to
be fixed at the top of the page and to
achieve that we are going to use another
class and that is now bar fix it top
let's save our changes reload our web
page so now the navigation bar is fixed
at the top at the moment these links
does not work and if you also want to
change the link text here so let's do
that so we want the text to be desert
lighthouse you know basically the names
of the images so let's include those
names here so this is going to be desert
let's change this to lighthouse to lips
and now those are the first three links
the fourth one we want that to be a
drop-down so I'm going to include
another list item here and the class for
this is going to be a drop down inside
this list item let's create an anchor
limit the href attribute is pulling to
point to hash and the class on this is
going to be drop-down toggle and we also
need data - toggle attribute and the
value for this is going to be drop-down
and the text on this drop-down is going
to be animals and next to that we also
want this little downward pointing arrow
so the text will be animals to get that
little downward pointing arrow we are
going to use panel iment with class
carrot and then we want the drop down
menu items the drop down menu items are
going to be jellyfish and penguins to
get those drop down menu items we are
going to use an unordered list with
class drop-down menu and inside this we
are going to create a list item and
inside that an anchor element a 3f
attribute is going to point to a hash
and the text is going to be jellyfish
and we need penguins
alright let's save our changes and
reload this page so we have our links
there at the moment these links are not
working so let's link these navigation
links with the images now if you look at
these images on the page notice the
development that contains the image has
got an ID so we are going to use these
IDs to link them up with the navigation
links right here so we are going to use
the jQuery ID selector so the ID of the
div here which contains the desert image
is div desert so I'm going to copy its
ID and then this desert link here but in
the navbar is going to point to that and
here we are using the jQuery ID selector
which is hash let's do the same thing
with the other images this is going to
be div lighthouse
and that this one will be they have
tulips and similarly this one will be
div jellyfish and this one is going to
be div penguins
all right let's save our changes reload
a web page and now our links should work
so all of them are working as expected
okay now what we want to do is as we
scroll down we want the respective
navigation links to be highlighted
automatically so let's look at the
configuration required for this scroll
spy plugin so here are the attributes
and some of the configuration required
for the scroll spy plugin first
attribute that we need here is the data
- spy attribute this attribute is
supplied on the element that is being
spied on in our example we are going to
spy on the body element because it's the
element that contains the images that we
want to scroll through so on the body
element I'm going to use data - spy
attribute and the value for this is
going to be scroll in addition to this
I'm also going to use data - target
attribute this attribute is used to link
the scrollable element that is the body
element with the navigation element that
is this navbar at the moment this navbar
does not have an ID let's give it an ID
let's call this main navbar we're going
to use this ID to link it with this
crawlable element that is with this body
element so let's use the jQuery ID
selector here and then the ID of the
navigation bar which is main navbar in
addition I am also going to use another
optional data - attribute and that is
data - offset this attribute specifies
the number of pixels to offset from top
when calculating scroll position this
attribute is extremely useful to control
when you want the navigation links to be
highlighted as we are scrolling through
the images this attribute is optional
and the default is 10 pixels from now I
am going to use 10 pixel
in a bit we'll discuss more about this
attribute another change that is
required is on the body element you know
where we have applied data as Phi is
equal to scroll it also requires CSS
position style to be set to relative so
within the head section let's include a
section for style type is going to be
text slash CSS and then for the body
element we are going to set position to
relative all right so with all these
changes let's reload our webpage and at
the moment we are viewing desert image
and notice the navigation link right
here desert is highlighted and as we
scroll through and when we you viewing
lighthouse look at that lighthouse
navigation link is highlighted similarly
as we scroll through and when we are
viewing tulips tulips link is
highlighted and when we have viewing
jellyfish animals is highlighted and
when we drop this down notice jellyfish
is highlighted and as we keep scrolling
down notice penguins is highlighted now
and look at that as we are navigating
through the respective navigation links
are highlighted
now let's discuss little bit more about
this data - offset at the moment they're
using the default which is 10 let's use
500 let's reload our web page and look
at this we have changed it to 500 and at
the moment we're viewing desert desert
link is highlighted as we scroll down
look at that though we are not viewing
lighthouse completely it has
automatically highlighted lighthouse
navigation link that's because we have
set the data - offset to 500 pixels so
here we are highlighting the navigation
link too early now if we set it to
negative 500 let's reload this and
notice at the moment viewing desert and
now we are viewing lighthouse but still
it is not highlighted and halfway
through that's when it is highlighting
lighthouse so here
we are highlighting the navigation link
too late so basically you know this
attributes lets you control when you
want the navigation links to be
highlighted for our example the default
which is 10 is working correctly so I'm
going to leave it right there
so that is scroll spy plugin thank you
for listening and have a great day