How to use this plugin with scrollspy bootstrap 4.0 list.
Nexeuz opened this issue · comments
I need add active class when user scroll on the page depdending to the item id https://getbootstrap.com/docs/4.0/components/scrollspy I don't have idea how to do it
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
Any Help? Thanks.
https://github.com/beeman/ngx-scrollspy-angular-cli-demo
maybe this demo helps
@JavanXD thanks but this implementation is not what I need, tried almost all, I've reading in another issues that you also have the same problem, can you implement this? with bootstrab 4.0 list? you can share your code?
thanks a lot!.
@Nexeuz I ended up implement my own directive based on this simple module. Writing your own scrollspy-directive is not that difficult as it seems. I was able to scroll-spy on an element and not only on the window
, which means you can also support a scrollbox.
With the above linked module you can fix this bootstrap4-beta problem where you need the active
-class on the parent element.
Ah I didn't realize it would be so easy to write one myself; thank you @JavanXD!!