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

this is part 50 of bootstrap tutorial in
this video we'll discuss the bootstrap
effects plug-in the bootstrap effects
plug-in is used to pin elements such as
an air bar when they are scrolled beyond
a certain point first let's look at the
effects plug-in attributes data spy
equals effects apply this attribute on
the element that you want to effects
data offset top this attribute specifies
when to toggle the pinning of an element
let's understand the use of this plug-in
with an example let's flip to visual
studio this is the same example that we
worked with in our previous video what
we want to do here is include a
Jumbotron at the top of this page so
let's flip to visual studio and then
inside this row I'm going to create a
column which is going to be 12 units
wide so let's create a development with
class call XS 12 and inside this column
let's create a Jumbotron to create a
Jumbotron we create a div element with
class Jumbotron inside this Jumbotron
let's include an h1 element and the text
inside this is going to be bootstrap our
fix example and I'm going to remove this
style definition from here we included
this style to basically fix the position
of the navigation menu on the left hand
side so I'm going to remove that style
let's say what changes reload this page
notice we get the jumbotron at the top
of the page now notice what happens as
we scroll down the navigation menu also
scrolls up along with the rest of the
page what we actually want to do is this
as we scroll down when the jumbotron is
no longer visible maybe at this point we
want the position of this navigation
menu to be fixed right here and then as
we scroll down further we want only the
images to scroll up we don't want the
navigation menu to be scrolling up and
that's exactly what the effects plug-in
does it's going to pin elements when
they are scrolled beyond a certain point
and the element that we want to pin is
this navigation menu and when do we want
to pin it we want to pin it when the
Jumbotron is no longer visible which is
roughly around
200 pixels and we know that with the FX
plug-in these are the two attributes
that we use and the element that we want
to uh fix is the unordered list which
contains of our navigation links so on
this element I am going to use data - pi
the value for this attribute is going to
be FX and when do we want to pin this
element we want to pin it when the
jumbotron is no longer visible which is
roughly around 200 pixels so data -
offset top equals 200 pixels let's save
our changes reload this page notice at
this point as we scroll down and when
the Jumbotron is no longer visible look
at what happens at that point at that
point the navigation menu is pushed down
and as we keep scrolling down further
look at what happens its position is
fixed there and that's not what we want
we want this navigation menu position to
be fixed 20 pixels from the top we don't
want that to be pushed down for that to
happen what I'm going to do is include a
class here called effects and I'm going
to set the top property we want the
navigation menu to be fixed 20 pixels
from the top so I'm going to set top to
20 pixels in a bit you will understand
why we are doing it in the effects class
let's see what changes reload our
webpage and look at this now as we
scroll down look at that when the
jumbotron is no longer visible look at
that another position is fixed 20 pixels
from the top
alright now let's understand what's
actually happening behind the scenes
with this FX plugin now to start with
you know when we first load the page at
this point you know for this unordered
list element the FX plugin is going to
apply a class called a fix top and then
as we scroll down and when we cross that
off set limit which is imposed by data
offset top attribute which is 200 pixels
in this case what's going to happen is
the FX plugin replaces a fix top class
with a fix class and what is the suffix
class going to do this class is present
with no bootstrap dot CSS and if you
look at the ethics class all it's doing
is its setting the position to fixed but
it is not telling at what position the
navigation menu in our case should be
fixed and that's the reason why we told
we want it to be fixed 26 ELLs from the
top so notice we're using the same class
here so bootstrap is setting its
position to fixed and we are telling it
to fix its position 20 pixels from the
top okay that's the reason why we have
set top property to 20 pixels within the
effects class we can actually look at
that in action let's launch browser
developer tools by pressing f12 I'm
using Google Chrome browser so we have
the developer tools right here I'm going
to right click on the navigation menu
and select inspect and notice here we
have our unordered list element and look
at the class it has applied it has
applied a fix stop class and look at
what happens as we scroll down as we
scroll down and when we scroll beyond
the offset limit imposed by data offset
top attribute look at what's going to
happen at this point look at that the
plug-in replaced a fix top class with a
fix class and that's when the position
of the navigation menu is fixed and it
is fixed 20 pixels from the top
thank you for listening and have a great
day