Can you please explain how to you the Affix Deirective please

[joelmuskwe]

Can you please explain how to you the Affix Deirective please

[JonnyBGod]

Sorry I have been very busy lately finishing several projects for customer, so I haven't had the time to fully test this lib with latest versions of Angular2 and create proper examples for each part.

That said, this is how I am currently using on one of my projects:

<div [scrollSpyAffix]="{topMargin: 70, bottomMargin: 70}"></div>

also, make sure you import ScrollSpyModule.forRoot() in your main module and declare ScrollSpyAffixDirective in the module you want to use it in.

[joelmuskwe]

Hi thanks for you quick response i implemented it i placed the ScrollSpyModule.forRoot() in the imports of my app.module.ts and i also placed the ScrollSpyAffixDirective in the app.module.ts in the declarations and import {ScrollSpyAffixDirective} from "ng2-scrollspy/src/plugin/affix.directive"; then i place [scrollSpyAffix]="{topMargin: 245, bottomMargin: 70}" on one of my divs in my app.component.html but i cannot get it to work.

[inzerceubytovani]

There has to be scrollSpy directive used in some parent element and then it will start to work. But it does not work same as bootstrap affix. This directive only set affixTop or affixBottom - single class affix missing.

[JonnyBGod]

Sorry been busy but I am in the middle of finished this lib now. I hope to finish it during the weekend and include documentation for each component.

[JonnyBGod]

@inzerceubytovani Also with next update I will include class affix that will be active if any off affixTop or affixBottom are active. Hope this solves your use case.

[inzerceubytovani]

I think it would be great if it worked like bootstrap affix : http://getbootstrap.com/javascript/#affix - there is also affix-top, affix-bottom and affix.

[JonnyBGod]

Please try new version v0.3.0.

Make sure you read docs for new declaration system.

I will try to create more documentation and example during next week.

[templth]

@JonnyBGod thanks for your comment! I can't find the documentation you mentioned.

I tried to use it this way:

<div scrollSpy class="col-md-4 menu blog-1">
  <aside [scrollSpyAffix]="{topMargin: '70px'}">
  (...)
  </aside>
</div>

I expected to have a class added / removed according to the scroll. Is it the expected behavior? Thanks very much for your help!

[JonnyBGod]

Yes that should work.

[templth]

@JonnyBGod following your message, I investigated a bit more the problem. In fact, we need to specify a value as a number:

<div scrollSpy class="col-md-4 menu blog-1">
  <aside [scrollSpyAffix]="{topMargin: 70}">
  (...)
  </aside>
</div>

Thanks for the great tool!

[felek000]

Can any one give compile example how to make it work ? i Import import {ScrollSpyAffixDirective} from "ng2-scrollspy/dist/plugin/affix.directive"; than in imports: ScrollSpyAffixDirective and in template: [scrollSpyAffix]="{topMargin: 70}"

and i get error: ScrollSpyAffixDirective is not an NgModule

[templth]

In fact, it's not related to ng2-scrollspy but to Angular2. You can only specify modules into the imports property of a module. Regarding the ScrollSpyAffixDirective directive, you need to set it in the declarations one:

(...)
import { ScrollSpyModule } from 'ng2-scrollspy';
import { ScrollSpyAffixDirective } from 'ng2-scrollspy/dist/plugin/affix.directive';
(...)

@NgModule({
  declarations: [
    (...)
    ScrollSpyAffixDirective
  ],
  imports: [
    (...)
    ScrollSpyModule.forRoot()
  ]
})
export class SomeModule { }

[felek000]

yes ive done this but on first time I enter page it works but when i get back i get error: ScrollSpy: duplicate id "window". Instance will be skipped!

[JonnyBGod]

@felek000 That is just a warning message. Basically you are using <div scrollSpy> in more then one place. Because there is no point in having more then one listener in window, it skips all but the first.

[felek000]

Well fine but scroll is not working after. I enter page X were there is scroll. I go page Y there is no scroll there all angular 2 routing component. I get back to page X scroll not working and i have this message.

[JonnyBGod]

1. ScrollSpyModule.forRoot() must be imported in main module.
2. scrollSpy directive should be placed in main component template.
3. import ScrollSpyAffixModule in the modules you want to use scrollSpyAffix

[felek000]

app.module import {ScrollSpyAffixDirective} from "ng2-scrollspy/dist/plugin/affix.directive"; import {ScrollSpyAffixModule} from "ng2-scrollspy/dist/plugin/affix"; declarations[..... ScrollSpyAffixDirective]...imports[....ScrollSpyModule.forRoot(),] component import { ScrollSpyModule, ScrollSpyService } from 'ng2-scrollspy';

template

<div scrollSpy>
  <div [scrollSpyAffix]="{topMargin: 10}">aaaaa</div>
</div>

I enter page 1 time ok, i refresh page ok. I go via click on different path in ap and get back same error. What I`am missing ?

[felek000]

Ok it will work when i give scrollSpy on dont know if this is intended but it works.

[MurhafSousli]

I have the same problem! imported ScrollSpyModule.forRoot() in app.module imported ScrollSpyAffixModule in component module

<div scrollSpy>
        <tool-bar  [scrollSpyAffix]="{topMargin: 100}" [baseFontSize]="16" (fontSize)="fontSize = $event"></tool-bar>
 </div>

no effect

[kylecordes]

@JonnyBGod looking back through this thread, the most troubling bit is this:

"and declare ScrollSpyAffixDirective in the module you want to use it in"

This will not work if you want to use this directive in more than one module of your application, which many of us will. A given directive can only be declared in one module. It seems like the module system is not set up correctly for scroll spy. There should be a module which I can import to every module where I want to use this directive and others, only that module should declare the directives.

[JonnyBGod]

@kylecordes you can import ScrollSpyAffixModule in the modules you where you need ScrollSpyAffixDirective.

[kylecordes]

@JonnyBGod Version 0.3.8, appears to be current on NPM, does not export a ScrollSpyAffixModule.

[JonnyBGod]

It does from ng2-scrollspy/dist/plugin/affix I am keeping core separate from plugins.

[kylecordes]

@JonnyBGod Thank you, I was able to import it from 'ng2-scrollspy/dist/plugin/affix'

[Vowan]

I have the following template

<div  scrollSpy scrollSpyElement="test" style="max-height: 100px; overflow: auto;">
    <div style="height: 500px;">
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <br/> 
        <p>bbb</p>
     <div [scrollSpyAffix]="{topMargin: 10, bottomMargin: 10}">aaaaa</div>
    </div>
</div>`

scrollSpy is working well, but scrollSpyAffix isn't. When scrolling, I always have

<div _ngcontent-cyv-7="" ng-reflect-options="[object Object]" class="**affix affix-top**">aaaaa</div>

So my div is alway fixed. Why is it? Thanks.

[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

[pthibodeaux]

Has anyone successfully gotten the affix directive working using the latest version of the package from npm - ngx-scrollspy, ver 1.2. I see lots of comments about this, but most references are old and relating to older packages. It appears the package structure has changed and the dist folder is no longer within the package. Is this a viable package anymore (for Angular 4) or should we abandon trying to get this to work?

[cormacrelf]

@pthibodeaux July this year isn't that old. Try this.

diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 400f26c..585e0bd 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';

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

 import { PagesRoutingModule } from './pages-routing.module';

https://github.com/beeman/ngx-scrollspy-angular-cli-demo/pull/4