By now, you are familiar with using Bootstrap pagination, Navbar and other navigation methods. Now, we will introduce one more: a Bootstrap scrollspy.
You could say a scrollspy does precisely what the name itself suggests: it spies on how you scroll. The content section your user has scrolled to is highlighted. Creating a scrollspy is easy and can be performed with both horizontal and vertical menus.
While it may not seem very useful for the coder, it adds to a pleasant user experience. The user can always see relevant updates on the navigation menu while they scroll up and down the page.
Contents
Bootstrap Scrollspy: Main Tips
- Bootstrap 4 allows you to create a scrollspy.
- A Bootstrap scrollspy allows you to update the navigation menu according to where you have scrolled inside the page.
Creating A Scrollspy
To get started with creating a scrollspy, you must apply an attribute and value data-spy="scroll" to the scrollable area of the website. If you wish for it to work on the whole page, you should apply the attribute to the <body> element.
Next step is to set the data-target attribute (applied to the same element as the data-spy attribute) to the .navbar class, or whatever class is directly associated with the navigation bar. The bar itself needs to be fixed so it's always visible, and this can be done using the .fixed-top or .fixed-bottom classes.
The last attribute on this element (data-offset) is optional. It is meant for defining the number of pixels to offset from the top of the website when the scroll position is being calculated.
Another crucial thing is matching the href attribute value in the navigation links' tags with the id of the corresponding containers. This way the scrollspy can highlight the navigation link as you scroll on the corresponding container.
See an example of HTML code to get a better idea:
<!-- The area where the scrollspy is supposed to work in -->
<body data-spy="scroll" data-offset="40" data-target=".navbar">
<!-- The navbar -->
<nav class="navbar fixed-top bg-dark navbar-dark navbar-expand-sm">
<!-- Navigation bar content -->
<ul class="navbar-nav">
<li><a href="#part1">Part 1</a></li>
<!-- navigation menu items -->
</nav>
<!-- Part 1 -->
<div id="part1">
<h1>Part 1</h1>
<p>Look at the navigation menu to see how it interacts with scrolling over this segment</p>
</div>
<!-- Other content -->
</body>Vertical Menu Scrollspy
It is also possible to make this work with a vertical menu. You simply need to utilize the Bootstrap 4 grid system to divide the layout so the menu and the content are not on top of one another.
Note: in this case, the <nav> element does not have the .navbar class, so we set it as the data target by referring to the ID of this element.
Next, you will have to create a vertical pill menu by adding the .flex-column class to the navigation menu's <ul> element. To read a bit more about this, visit our Bootstrap 4 Navigation tutorial.
To see how Bootstrap scrollspy works with a vertical menu, see the example below:
<body data-spy="scroll" data-target="#verticalScrollspy" data-offset="1">
<div class="container-fluid">
<!-- container fluid is necessary for the main container to span the whole width -->
<div class="row">
<nav class="col-3 col-sm-2" id="verticalScrollspy">
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a href="#segment1" class="nav-link active">Segment 1</a>
</li>
...
</ul>
</nav>
<div class="col-9 col-sm-10">
<h1>Segment 1</h1>
<p>Look at the navigation menu to see how it interacts with scrolling over this segment</p>
</div>
...
</div>
</div>
</div>
</body>Bootstrap Scrollspy: Summary
- Whenever you're using a navigation menu on your page, you can also add a Bootstrap scrollspy.
- As you scroll up or down the page, the navigation menu gets updated by the scrollspy.