a blog for those who code

Wednesday 22 February 2017

How to create a Scrollspy Navigation in Bootstrap 4

In this post we will be discussing about creating a Scrollspy Navigation in Bootstrap 4. The content of an HTML document can be very long and difficult to access only through the scroll. Scrollspy Navigation in Bootstrap 4 offers a better UI experience that allows user to jump to the data they wish to see along with that it enables scrolling through the content.

A scrollspy is used to automatically update links in a navigation list based on scroll position. Scrollspy is a better option to use than tabs because it will allow you to scroll through the content.

Note : Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safer, refer to until Bootstrap 4 becomes an official release.

HTML


<div class="col-sm-3" id="spy">
 <ul class="nav nav-pills flex-column">
  <li class="nav-item"><a class="nav-link active" href="#scroll1">First</a></li>
  <li class="nav-item"><a class="nav-link" href="#scroll2">Second</a></li>
  <li class="nav-item"><a class="nav-link" href="#scroll3">Third</a></li>
  <li class="nav-item"><a class="nav-link" href="#scroll4">Fourth</a></li>
 </ul>
</div>
<div class="col-sm-9 scrollspy-example" data-spy="scroll" data-target="#spy">
 <div id="scroll1">
 </div>
 <div id="scroll2">
 </div>
 <div id="scroll3">
 </div>
 <div id="scroll4">
 </div>
</div>


Adding Style


.scrollspy-example {
 position: relative;
 height: 250px;
 overflow: auto;
}

Scrollspy requires Relative Positioning i.e. the use of position: relative on the element being spied on. This is most commonly the <body> element, so you can apply it to that element. However, when spying on other elements, you will need to have height set and overflow-y: scroll; applied.

Result :



Full Code : http://codepen.io/codingdefined/pen/VPobqg

Please Like and Share CodingDefined.com blog, if you find it interesting and helpful.

No comments:

Post a Comment