Is there an offset for bottom?

[sharpmachine]

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]

+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]

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

[sharpmachine]

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]

+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]

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

[plong0]

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]

@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?