Does Spy any element scroll can do this ?

[rainstormza]

I want to active css class when I scroll to div id that I define.

thanks

[JonnyBGod]

Yes this should be easy to achieve. Try something like:

@Component({
  template: `
<div scrollSpy [scrollSpyIndex]="{id: 'contexts', selector: 'context'}">
  <div class="context" *ngFor="let context of (contexts | async); let i = index"  id="context_{{i}}">
    ...
  </div>
</div>
  `,
  providers: [
   { provide: 'windowObject', useValue: window }
  ],
})
export class MyComponent {
  public selectContext$: ReplaySubject<string> = new ReplaySubject(1);

  constructor(
    @Inject('windowObject') private win: Window,
    private scrollSpyService: ScrollSpyService,
    private scrollSpyIndex: ScrollSpyIndexService
  ) {
    this.scrollSpyService.getObservable('window')
      .subscribe((e) => {
        let currentScrollPosition: int;
        if (typeof e.target.scrollingElement !== 'undefined') {
          currentScrollPosition = e.target.scrollingElement.scrollTop;
        } else if (typeof e.target.scrollY !== 'undefined') {
          currentScrollPosition = e.target.scrollY;
        } else if (typeof e.target.pageYOffset !== 'undefined') {
          currentScrollPosition = e.target.pageYOffset;
        }
        let items: any[] = this.scrollSpyIndex.getIndex('contexts');

        if (!items || !items.length) {
          return;
        }

        let contextId: string;
        for (let i = items.length - 1; i >= 0; i--) {
          if (this.currentScrollPosition - items[i].offsetTop >= 0) {
             contextId = items[i].id;
             break;
          }
        }

        this.selectContext$.next(contextId);
      });
  }
}

You can then subscribe to selectContext$.

[rainstormza]

@JonnyBGod excellent , thanks
I gonna try this
anyway , I think that if you can provide this thing to demo or tutorial step by step , it pretty easy to use 👍

[JonnyBGod]

Let me know if it worked, might have some bugs or need some changes I just did it out of my head in a few minutes, did not test it.

Will definitely need to find some time for documentation.

[rainstormza]

@JonnyBGod

error like this happen after I 've tried your code :(
any suggestion ?
thanks

[JonnyBGod]

can you try moving the conde inside constructor to ngAfterviewinit?

[rainstormza]

@JonnyBGod yes, I do exactly the same as your code
Could you share your source code ? thanks :)

[anleo]

Can't bind to 'scrollSpyIndex' since it isn't a known property of 'div'. ("
<div style="min-height: 200vh"
     scrollSpy
     [ERROR ->][scrollSpyIndex]="{id: 'contexts', selector: 'context'}"

Any suggestions?

[Nexeuz]

@anleo you have to import

import { ScrollSpyIndexModule } from 'ngx-scrollspy/dist/plugin';
import { ScrollSpyAffixModule } from 'ngx-scrollspy/dist/plugin/affix';

To your app.module.ts.

[Borfswitch]

I created a plunker that implements an example of this: https://plnkr.co/edit/7a2V6b5LMs3WGTw1HdVk?p=preview