How to use scrollspy?

[gauravsoni119]

Can you provide demo of scrollspy? I don't know which directive should I use for scrollspy?

[JonnyBGod]

ScrollSpy core parts are intended for developers to create their own functionality os learn how to properly spy on scroll.

Are your trying to setup a specific plugin?

[maxmarkus]

I am trying to wrap my head around this plugin too, but it is not self explanatory. Since I couldn't get the scrollspy-affix directive working I implemented the navigation-scrollspy by my own which is working now. Still it feels strange to implement something that already exists in that very plugin. But this is already talked about in the other thread #72

I would like to get some advice on certain aspects of the sticky behavior:

• how to define at which position it should stay sticky when scrolling up?
• what does setting [scrollSpyAffix]={topMargin:100} or any other numeric value? does not change anything, but I think I am on the wrong track here and this is the offset that is being used when actually using the affix

Partially I can already answer this question, since I took a break over the weekend I had a fresh view on that.

1. You need a position: sticky polyfill like https://github.com/wilddeer/stickyfill (this I already had)

2. set classes properly, like

   .affix {
   position: -webkit-sticky;
   position: -moz-sticky;
   position: -ms-sticky;
   position: -o-sticky;
   position: sticky;
   top: 20px;
   }

The top value is the distance which the element will keep once scrollSpy set the .affix class.
Missing part for me is now - the offset of 20px (in this example), currently the affixed container is scrolling up to top: 0 and jumps then to 20px once its affixed.

[beeman]

With the help of @JonnyBGod I've created an example implementation https://ngx-scrollspy.now.sh

The source can be found here https://github.com/beeman/ngx-scrollspy-angular-cli-demo

[JavanXD]

@beeman Thank you, your code was very helpfull.
@JonnyBGod did not bring some documentation up yet, could you do it?

I am struggling with "scrollSpy-index-render" because i want to use my own custom ul list.
ScrollSpyIndexRenderOptions does not have options for li.class styling, which is important for Bootstrap4 nav-tabs.

This is how you managed to rendered your Navbar:

<scrollSpy-index-render [scrollSpyIndexRenderOptions]="{id: 'myScrollArea', spyId: 'window', topMargin: 90}"
		class="hidden-sm-down">
</scrollSpy-index-render>

My custom Navbar in Bootstrap4:

<ul class="nav nav-tabs tabs-right flex-column navbuttons">
	<li class="nav-item" [class.active]="isSectionActive('section1')"><a [routerLink]="['/employees' , e().userId , 'profil']" fragment="section1" class="nav-link">section1</a></li>
	<li class="nav-item" [class.active]="isSectionActive('section2')"><a [routerLink]="['/employees' , e().userId , 'profil']" fragment="section2" class="nav-link">section2</a></li>
	<li class="nav-item" [class.active]="isSectionActive('section3')"><a [routerLink]="['/employees' , e().userId , 'profil']" fragment="section3" class="nav-link">section3</a></li>
	<li class="nav-item" [class.active]="isSectionActive('section4')"><a [routerLink]="['/employees' , e().userId , 'profil']" fragment="section4" class="nav-link">section4</a></li>
</ul>

Either there is a good way to change design of "scrollSpy-index-render" or use your my own custom Navbar?

Documentation of ngx-scrollspy would be very desirable :) Because it is the only good approach i found to get Bootstrap Scrollspy working in an Angular4 app 👍

[pthibodeaux]

Does ngx-scrollspy require Bootstrap 4? I've tried to implement 2 approaches - 1 in the read.md for ngx-scrollspy, but somthing seems missing in the instructions regarding the ScrollSPyService. The observable always returns undefined. Specifically, the code in 'ngAfterViewInit' (copied from Read.md) throws the exception since the service returns undefined.
I also tried the method by @beeman, which partially works, but I cannot get it to make the references active while scrolling. I noticed that the sample project uses bootstrap 4 beta. Is that required? We are still on bootsrtap 3.
I also noticed that the sample by @beeman uses version 1.0.0, while @JonnyBGod uses 1.2.0 and the packaging has changed significantly.
Has anyone gotten this working using Angular 4, Bootstrap 3.7, and ngx-scrollspy 1.2?
Also, I have tried several ways, but have been unable to get the affix directive to be recognized. I followed a lot of posts about this, but all seem inconclusive