search

harm-less / angular-sticky

Pure javascript AngularJS directive to make elements stick when scrolling
http://harm-less.github.io/angular-sticky
83 stars 38 forks source link

Want it Sticky only after scrolling past other bottom elements #41

Open Mr-Anonymous opened 6 years ago

Mr-Anonymous commented 6 years ago

Love this plugin and I am using this in my Angular 1.5.9. and it works. However, I want to know if something like this possible.

I want the sticky element to become sticky only after the other bottom divs are scrolled. For example, I have a left side bar like this:

<div class="block-1 avatar" hl-sticky="" offset-top="50">
<!-- STICKY AVATAR -->
</div>
<div class="block-2 statistics">
<!-- SOME STUFF -->
</div>
<div class="block-3 comments">
<!-- SOME STUFF -->
</div>
<div class="block-4 recommendations">
<!-- SOME STUFF -->
</div>

At the moment, it is sticky from the moment the block-1 avatar is scrolled so it overlaps on the other bottom divs on scrolling.

What I want is, I want the above left bar divs to be relative during scroll and I only want the block-1 avatar to become sticky after the user has scrolled past block-4 recommendations.

I read the API and not sure if there is a setting for it. Is the above possible?

Thanks, Neel.