How to Use Scrollspy Plugin of Bootstrap
What does scrollspy means?
Scrollspy, nowadays, is a simple term used in web development. When we scroll our screen down or upwards, this plugin shows us which element has appeared on the screen. And accordingly, We can add
".active" class to that element of navbar which is related to the visible element.
Scrollspy in Bootstrap
Bootstrap provides "Scrollspy" plugin in its core. Using it, we can add modern functionality to our web page with another plugin of Bootstrap - Affix. When you include
"bootstrap.js" file or "bootstrap.min.js" file in your project, the "Scrollspy" plugin is already part of it. But if you want to use only the "Scrollspy" plugin and do not want to use other available plugins, then you can download and use only the "scrollspy.js" file.
Like other plugins of bootstrap, you can also use "scrollspy" plugin in two ways. The first is to write a code without JavaScript. You can use data attributes for this. And another way is that you can customize it by typing in the code of JavaScript. In this blog, I will tell you in detail about these two approaches.
So let us see the classes and data attributes used for this plugin of bootstrap.
Classes and Data Attributes we required
For this, we do not need any class because the purpose of "scrollspy" is not to design, but it works like an event. Now let us see the list of data attributes of "scrollspy".
data-spy="scroll": This is given to the wrapper element of HTML that we want to scroll. Generally, this is given to the body tag.data-target="selector": In this we give the name of the ID or class which is the navbar in which the active class will be added in the included links.data-offset: Here we will provide a number which will tell you how much offset we need to add while calculating the position of the scroll from the top.
Making of Scrollspy without JavaScript
We just have to give some data attributes in the wrapper. If you want to use the entire page for "scrollspy", then you can give these attributes to the "body" tag. Something like this:
<body data-spy="scroll" data-target="#targetNav" data-offset="45">
But these attributes are not required to be given to the body tag only. We can give it to other tags also, which should be the wrapper tag of our scrolling screen.
Now, let us create a navigation bar of the bootstrap for our project. Its codes are as follows:
<nav class="navbar navbar-inverse" id="targetNav>
<ul class="nav navbar-nav">
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
<li><a href="#sec4">Section 4</a></li>
</ul>
</nav>
Pay attention to this navbar, especially ID. This is the same ID, which is given in the body tag's data-target attribute. Because of this ID, the scrollspy plugin will understand that, which navbar links to update
Once the navbar is ready, the next thing we have to do is to create those sections which will be made with the IDs given in the links of the navbar. We will create a section for each link.
<div id="sec1"> <h1>Section 1</h1> <p>...</p> </div> <div id="sec2"> <h1>Section 2</h1> <p>...</p> </div> <div id="sec3"> <h1>Section 3</h1> <p>...</p> </div> <div id="sec4"> <h1>Section 4</h1> <p>...</p> </div>
That's All! Now we have a working scrollspy. You can check it by downloading it from here.
Making of Scrollspy With JavaScript
Now it is a time to use scrollspy with javascript. When we use the scrollspy plugin with the help of javascript, we do not need to give any attribute in the body tag, as we had created in scrollspy with CSS. Apart from this, everything will be made just as we have made before. We also have to create a navbar as well as create section divs also. After doing all this, we are now ready to write JavaScript's codes.
Now let us add the scrollspy plugin with the body tag. Codes will be similar to this:
You can see that here we have set the target and offset properties of the scrollspy. Now our plugin is ready to work just like it was doing when created by CSS only. But now because we are using JavaScript, we can do one more thing in it. That is, add an event.
Events are inbuilt in all the plugins present in the bootstrap. There is also an event in the Scrollspy plugin. And its name is
activate.bs.scrollspy. This event occurs when our section changes through scrolling. What happens when this event occurs, for this, we can pass a function. See the following codes:
Now we will make some changes in the HTML of our navbar. And this change will be, one more item on the right side of the navbar. This will be a simple text. For this, bootstrap has a class
.navbar-text. See the following codes:
We'll change the given text in
.navbar-text as event run every time. Now we will type some code inside the function in jQuery.
In the first line we inserted the text of the navbar's active anchor tag into a variable named
val. And in the second line we will change the text of the .navbar-text class and enter this text into it: "You are currently watching:" + val.
Now the text of
.navbar-text class will be changed when this event occurs. done. Our scrollspy plugin is working well with the help of javascript.
Conclusion
We find ways to implement bootstrap scrollspy plugin in this blog. First, we just learned to put this functionality on our web page with the help of CSS, and after that, we did the same with the help of jQuery. I Hope you enjoyed the tutorial. Do let me know your thoughts in the comment section below.