How to use this plugin with scrollspy bootstrap 4.0 list.

[Nexeuz]

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.

[JavanXD]

https://github.com/beeman/ngx-scrollspy-angular-cli-demo
maybe this demo helps

[Nexeuz]

@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!.

[JavanXD]

@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.

[willwsharp]

Ah I didn't realize it would be so easy to write one myself; thank you @JavanXD!!