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