Does not Stick if page does not reload

[ccodina01]

so this is my simplified code using Angular 9:

> <app-header>normal header does not stick</app-header>
> <div class="row">
>     <div class="col-9">
>        content of col-9 can grow like a supermarket cart
>     </div>
>    <div class="col-3" #boundary>
>        <!-- this element grows in height as col-9 does -->
>        <div #spacer></div>
>       <div stickyThing [spacer]="spacer" [boundary]="boundary" [enable]="true">
>          things expected to stick
>       </div>
>    </div>
> </div>
> <app-footer>normal footer does not stick and dont want sticky component to enter here</app-footer>

If i stay on the page the sticky works as charm.
When i go outside to add a new product to my cart and then return to the cart page to see the changes, the sticky element is stuck at its initial position. I have to reload (F5) to make the sticky element run as expected.

I feel this is a bad behaviour on the tool and i will be forced to create a directive from scratch u_u *sigh

There is no javascript nor typescript code affecting the enable property anywhere in my project and i have tried deleting the boundary beta functionality, yes, and the component behaviour is the same as i posted before. I have to reload page for sticky to stick qhen i return to the page :/

PD: The project loads perfecty and without errors, if the code posted is not, it's simply because i have only put it as example here.

[Antoine Chabert]

Same problem in a clean new project using router.
If the page with stickyThings is not loaded and comes after, with navigation for example, this doesn't work.

[Jordan]

same here

[fredericopavao]

Same!

[Jordan]

any status for this?

[Thorsten Rintelen]

same here

[misokim]

same here

[Matt Harting]

I am having this problem as well. I looked into it and discovered that ngOnInit was completing before the sticky element was defined on the page and the elementOffsetY variable was getting set to the bottom of the page.

I found a solution. If you update this line https://github.com/w11k/angular-sticky-things/blob/master/projects/angular-sticky-things/src/lib/sticky-thing.directive.ts#L232 to read

if (pageYOffset < elementPos.offsetY) {

and stop using the this.elementOffsetY variable, the problem will go away.

I would make a PR for this, but I don't see any guidelines posted for contributing guidelines. Could one of the maintainers respond and let me know if you would like for me to make the PR or if they will put in the fix?

Thanks.

[Kai Henzler]

@mharting could you please create a PR for this fix?
We'll try to integrate the PR as fast as possible

[Matt Harting]

@kaihenzler Here is the PR #95. Thanks for pushing this through.

[Kai Henzler]

I published version 1.3.2 on npm. Thanks for the PR @mharting

Please let me know if you experience any further issues with this release