Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

How do I use Bootstrap scrollspy?

How do I use Bootstrap scrollspy?
, by

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?

1 answer
votes: 391
Answer

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/