How do I use Bootstrap scrollspy?
I would like to use Bootstrap's scrollspy plugin in Drupal 8. So I edited the html.html.twig
file replacing
<body{{ attributes.addClass(body_classes) }}>
With
<body{{ attributes.addClass(body_classes) }} data-spy="scroll" data-target=".nav-scrollspy" data-offset="50" >
Where .nav-scrollspy
is the class of my navigation block. Additionally I added the following JavaScript to my theme:
$('body').scrollspy({ target: '.nav-scrollspy' });
But as this does not work I were wandering whether or not this plugin is already integrated in Drupals Bootstrap theme. Apparently not, as I could not locate such a file in themes/bootstrap/js/
.
Unfortunately I did not find such a file in the web neither, so I am asking my self, where to get it and how to add it to Drupal?
AFAIK your bootstrap theme will be having bootstrap.js
or bootstrap.min.js
included. Generally, scrollspy plugin related code will be inside these files.
So try to recheck whether you have added nav-scrollspy
to your div element. I think you might need to have 'id' for your div element and a proper link to it.
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
</body>
Also in Drupal 8, caching is a bit aggressive so try to rebuild your cache and check again. For better understanding refer http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins/