search

angular-ui / ui-scrollpoint

Add a 'ui-scrollpoint' class to elements when the page scrolls past them.
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-scrollpoint/master/demo/index.html
MIT License
28 stars 25 forks source link

Is there an offset for bottom? #3

Open sharpmachine opened 9 years ago

sharpmachine commented 9 years ago

Is Ui-Scrollpoint meant to be an Angular-friendly Affix.js? If so, how do I set a bottom-offset–a class that get's added when the bottom is reached? I want to remove the ui-scrollpoint class when I reach the bottom.

bariscc commented 9 years ago

+1 I was wondering and hoping the same but after having a glimpse on the js, dont think there is a bottom-offset. Would be great.

PowerKiKi commented 8 years ago

Could you have a look at #8 and see if it answer your question ?

sharpmachine commented 8 years ago

Thanks @PowerKiKi. So #8 isn't quite what I had in mind. I still want to activate the fixed based on top, but when I reach a certain point at the bottom while scrolling I want to deactivate the fixed position

nicotroia commented 8 years ago

+1 Anyone know a way to remove "ui-scrollpoint" class after reaching a certain point? Edit: I can wait until "scrollAction" is triggered initially, then add scrollEvent listeners to detect when you've scrolled past the "bottom" point and manually remove the "ui-scrollpoint" class. It should work but I feel like a "bottomPoint" should be built in.

PowerKiKi commented 8 years ago

If somebody makes a PR with tests and doc, I'll merge it.

plong0 commented 8 years ago

Maybe some of the following could be relevant / helpful to this issue? If not, can you please expand on your use case for the bottomPoint?

With the ui-scrollpoint-edge attribute in version 2.0.0, we can do things like:

ui-scrollpoint-edge="{top:'bottom', bottom:'top'}"

or more conveniently, the alias: ui-scrollpoint-edge="view"

This configures the scrollpoint to trigger when the bottom edge of the element hits the top edge of scroll target, and when the top edge of the element hits the bottom edge of the scroll target. Essentially, it triggers when the element goes entirely out of view, hence the alias.

If it is about pinning/stickying of elements:

I have a branch on my fork that introduces a ui-scrollpoint-pin directive that injects a placeholder when the ui-scrollpoint is applied. When the ui-scrollpoint's original location comes back into view (ie. the placeholder's ui-scrollpoint triggers), it removes the placeholder. I think this type of pinning feature is out of scope for ui-scrollpoint, so I will be setting up a new project for it sometime in the next week or so.

Further thoughts / workaround could use two ui-scrollpoints with ui-scrollpoint-action where the action callback sets a $scope variable that handles applying/removing the scrollpoint class on your desired element.

plong0 commented 8 years ago

@sharpmachine I think PR #16 might solve your question...

With it, you could do like: <div ui-scrollpoint ui-scrollpoint-edge="{'top': '25%', 'bottom': '1'}"></div>

That would activate the scrollpoint when you scroll past 25% from top, and deactivate when you hit the bottom.

I will note that the bottom setting only acts as a "deactivator" if both top and bottom are absolute, in which case ui-scrollpoint is applied when scrolled between those absolutes. If there is a relative setting, it takes precedence.

I think it is pretty close, but would need some adjustment in the scrollEdgeHit function.

I am interested to hear from those requesting this feature what the attribute values would ideally look like?