w11k / angular-sticky-things

Sticky Directive for Angular 2+

Home Page:https://w11k.github.io/angular-sticky-things

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MarginTop & Height is getting added and creating more gap

vijaycreatise opened this issue · comments

When we give marginTop and spacer. For spacer it is adding both marginTop and height of the div. So it is creating jerk. And some times instead of adding the numbers it is concatenating the numbers.
Means, If height is 100px and marginTop is 60, instead of 160px it become 10060px.

I know the solution for both problems.

var spacerHeight = marginBottom + height + marginTop;
this.spacerElement.style.height = spacerHeight + "px";

Instead of above it should be

this.spacerElement.style.height = height + "px";

This should not be spacerHeight , this should be height.
Can u please correct it update the repo

Current issue Code is here.
https://stackblitz.com/edit/angular-wsml5d

Hi,

I addressed this issue in a PR I opened recently, which is in turn fixing some other issues we had before. You can read more about it in the PR's description and linked threads. I'm waiting for the owner's response regarding this, but it should be fixed as soon as that's merged!

This issue continues to exist as the height and margintop get concatenated

I'm facing the same issue right now, here's a temporary fix IFF you know the container size:

<nav class="nav" stickyThing marginTop="64" [scrollContainer]="'.page-container'">
  // content
</nav>
<div class="nav-spacer"></div>

.nav { &.is-sticky ~ .nav-spacer { height: 54px; // the container size } }

The fix for this issue will come with the next release.