prevent stacking of non-overlapping sticky elements?

[daniel-halldorsson]

I have two bootstrap columns both with sticky elements in them

<div class="col-md-6">
    <div hl-sticky="">
        left sticky
    </div>
</div>
<div class="col-md-6">
    <div hl-sticky="">
        right sticky
    </div>
</div>

they do not overlap and id like them to both stick to the top of the screen, the problem i am having is that the second (right) sticky, is offset in the Y position starting from the bottom of the left div, id like them both to sit flush at the top of the screen.

I have a work around of setting the offset-top of the right sticky to negative the left sticky height but it feels a bit hacky, what is the best way to achieve this? thanks

[harm-less]

Have you seen the advanced collection demo already? That should fix your problems.

[daniel-halldorsson]

ah legend, simply giving each their own collection did the trick :). thanks for the quick reply.

<div class="col-md-6">
    <div hl-sticky="left" collection="left">
        left sticky
    </div>
</div>
<div class="col-md-6">
    <div hl-sticky="right" collection="right">
        right sticky
    </div>
</div>

[igimenez]

Awesome!!