ngBootstrap ScrollSpy with sticky top and ho neight

How do I get ngbScrollSpy to work with a link list that uses sticky top, and no height on the ngbScrollSpy element?

Here is a StackBlitz showing the setup.

https://stackblitz.com/edit/angular...rollspy-items.ts,src/app/scrollspy-items.html

I think I need to set some kind of container or target to the body element.

Code:

<div class="row">
<div class="col-4">
<div id="list-example" class="list-group sticky-top">
<button type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="[spy, 'items-1']">
1 - button
</button>
<button type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items-2">
2 - button
</button>
<a type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items-3">
3 - link no href
</a>
<a
class="list-group-item list-group-item-action"
href
[class.active]="spy.active === 'items-4'"
(click)="spy.scrollTo('items-4'); $event.preventDefault()"
>
4 - link no directive
</a>
<a routerLink="." class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items">
5 - routerLink example
</a>
</div>
</div>
<div class="col-8">
<div ngbScrollSpy #spy="ngbScrollSpy" rootMargin="16px" class="bg-light p-3 rounded-2 mb-3">
<h4 ngbScrollSpyFragment="items-1">First heading</h4>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
<h4 ngbScrollSpyFragment="items-2">Second heading</h4>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
<h4 ngbScrollSpyFragment="items-3">Third heading</h4>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
<h4 ngbScrollSpyFragment="items-4">Fourth heading</h4>
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
</div>
</div>
</div>

Continue reading...