Using scrollSpyAffix directive

[Kévin Bulmé]

Hello,

I'm trying to make an affix in my app but can't figure out how to do this.

Have you got some example of scrollSpyAffix working fine?

I've tried the following but nothing appens

<div scrollSpy>
    <div class="white-strip"></div>
    <header>
        <div class="title" scrollSpyAffix >
            <h1>Hello world</h1>
        </div>
    </header>
<div>

Thanks !

[Stuart Green]

I'm also struggling to use this, I hope the author will make some example pages soon.

[pTk]

For getting the affix in your navbar.
In your Navbar component

import { Component, HostListener } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls: ['navbar.component.css'],
})
export class NavbarComponent {
    isScrolled = false;
    currPos: Number = 0;
    startPos: Number = 0;
    changePos: Number = 15;

  @HostListener('window:scroll',['$event'])
        updateHeader($event: any) {
        this.currPos = (window.pageYOffset || $event.target.scrollTop) - ($event.target.clientTop || 0);
        if(this.currPos >= this.changePos ) {
            this.isScrolled = true;
        } else {
            this.isScrolled = false;
        }
    }
}

and in the navbar.component.css

.page-scroll-header {
    background-color: greenyellow !important;
    opacity: 0.9;
}
.my-navbar {
     border-radius: 0;
}
.affix {
    top: 0;
    width: 100%;
    z-index: 10000;
  }
.my-navbar-container {
    padding-bottom: 15px;
 }

And finally in your navbar.component.html

<div class="container" [ngClass]= "{'my-navbar-container': isScrolled}">
    <!-- Logo and other stuffs -->
    <nav class="navbar navbar-default my-navbar" [ngClass]= "{'affix': isScrolled}">
    <!-- links -->
    </nav>
</div>

Tweak the padding-bottom, changePos values to get it rite.

[Kyle Cordes]

@pratheekhegde Your snippet appears to be a way to hand-code the "affix" feature in an application, rather than using the existing scrollSpyAffix directive.

There is more discussion in #72.

[pTk]

@kylecordes This was a workaround back in November 2016. Even I wasn't able to get the affix working back then. Anyways thanks for pointing me to #72 now.

[Kyle Cordes]

@pratheekhegde Here is some good news. If you read through all of #72 and follow the pattern pointed out in there (scroll spy at some outer container DIV or whatever of your application, affix on the thing you want to affix) it does work today.

[inf3rum]

I tried it and followed the steps, but it does nothing. No errors though...
Has anybody tried this with a complex project other than simple header with some basic content?

In particular my project uses .container...
but nothing really happens...

This is what I did:
--- app.module.ts

import {ScrollSpyAffixDirective} from "ng2-scrollspy/dist/plugin/affix.directive"
import { ScrollSpyModule, ScrollSpyService } from 'ng2-scrollspy';

then in @NgModule({
declarations: [
. . .
ScrollSpyAffixDirective],
imports: [
. . .
ScrollSpyModule.forRoot()

--- In my component.ts
import {ScrollSpyAffixDirective} from "ng2-scrollspy/dist/plugin/affix.directive"

--- In my component.html

      <div scrollSpy>
        <div class="page-header text-center">
          <div [scrollSpyAffix]="{topMargin: 0}">
            Please enter a cell phone number that we can contact you with.
          </div>
        </div>
      </div>

...

-->

---

Nothing at all happens... :(

Can anybody comment on this?

[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