Simple

To activate the scroll glue on an element just add the scroll-glue attribute.

<div scroll-glue/>

{{item}}

With two-way data binding

If you pass a scope variable to the attribute, scroll-glue updates the variable to true when the glue is attached or to false if the glue is released and activates/deactivates the glue according to the variables value.

<div scroll-glue="glued"/>

{{item}}

With one-way data binding

If you pass an expression that is not a scope variable, the scroll-glue is bound to the result of this expression.

<div scroll-glue="!glued"/>

{{item}}

If you want to force one way-binding on a scope variable use double negation:

<div scroll-glue="!!glued"/>

Scroll Direction

You can also specify the scroll direction by combining the following directives:

<div scroll-glue-top="glued"/>

{{item}}

<div scroll-glue-bottom="glued"/>

{{item}}

<div scroll-glue-left="glued"/>

<div scroll-glue-right="glued"/>