How to use Scrollspy & Affix in Angular 2

Question

I noticed that you cannot use in angular 2 components bootstrap feature like data-spy="affix"

Does anyone know how to use affix and scrollspy in angular 2? (Example)

use this, I'm still trying to figure out how to use affix with it though, npmjs.com/package/ng2-scrollspy — Motassem Kassab
– Motassem Kassab, Commented Nov 4, 2016 at 13:43
Have you managed to set up afix with angular2? I'm facing the same "problem". — Ben
– Ben, Commented Nov 16, 2016 at 9:53
@Ben I just created a service with a event on scroll, and a directive that sets style on the element based on some logic. I would share it but I don't have the code anymore. You could probably use this too: npmjs.com/package/ng2-page-scroll , you just need to bold your element on scroll finish, probably, i'm not sure — Gerald Hughes
– Gerald Hughes, Commented Nov 16, 2016 at 10:23
@SGN were you able to use scrollspy and affix in angular 2 If yes can u plz share the input — Pushkar Phule
– Pushkar Phule, Commented Jul 11, 2017 at 12:54

mad_fox · Accepted Answer · 2021-05-15 16:13:52Z

10

You could write your small directive which would do the same thing. I'm sharing my code:

Directive:

@Directive({
 selector: '[scrollPoint]'
})
export class ScrollPointDirective {
   @Input() scrollPoint: number;
   constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer,
    private el: ElementRef
 ) { }

   @HostListener('window:scroll', [])
   onWindowScroll() {
      const windowScroll = this.document.body.scrollTop;
      if (windowScroll > this.scrollPoint) {
        //add class to the native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', true);
      } else {
        //remove class from native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', false);
      }

   }

 }

The @Input scrollPoint parameter can be passed from your HTML

HTML:

 <div [scrollPoint]="235">
    <ul class="nav-stacked">
       //your code
    </ul>
 </div>

Add CSS to the class added in the directive:

CSS

.sticky-nav {
  position: sticky;
  top: 90px;
  bottom: 0;
 }

I haven't been able to integrate affix to angular2 as well, but this did it for me. Hope it helps.

edited May 15, 2021 at 16:13

mad_fox

3,2186 gold badges37 silver badges49 bronze badges

answered Jul 12, 2017 at 4:04

Antara Datta

1,9792 gold badges14 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prateek Gangwal Over a year ago

Great explanation @AntaraDatta 👍

ojathelonius Over a year ago

This does not make sense for sticky elements, as you're currently replacing position: sticky behavior with some Javascript. Either use sticky entirely and properly, or use position: fixed with some JS

windmaomao · Accepted Answer · 2018-01-22 19:41:02Z

1

You do not need a directive to get this working (Angular 5.0).

1) Make sure bootstrap 3 is loaded <script src="assets/js/bootstrap.min.js"></script>

2) Need to identify the element where the overflow scroll is visible. <aside class="affix-mc" data-spy="affix" data-target=".main-body" data-offset-top="20">

Unless your scrollbar is originated from window, you need to specify the data-target

3) Theme your element a bit, ex. &.affix { width: 180px }

This approach even works for page embedded inside children of routers.

answered Jan 22, 2018 at 19:41

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to use Scrollspy & Affix in Angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related