Using sticky for 2 columns is overlapsing
Closed this issue · 1 comments
I use sticky kit on a 2 columns layout. Simple blog mockup, a sidebar on the right become sticky when it reach its end, then only content on the left scroll.
<div class="row">
<div class="column main"></div>
<div class="column sidebar"></div>
<div>
$('.main, .sidebar').stick_in_parent();
Issue is the .sidebar is overlpasing the .main, it stick to the left.
I use Foundations 6 flexbox grid.
It was working before... since I must have change something and impossible for me to find the issue. I looked in every place possible, try all options possible but nothing.
Can you help on this one?
I solved it by myself.
Position fixed on a direct flex child was mistaken. Absolute and fixed elements are out of the flexbox flow.
I just needed to add a container inside the flex child, add the stiky method on them, and specify the parent is the row and not the column.
<div class="row">
<div class="column main">
<div class="sticky"></div>
</div>
<div class="column sidebar">
<div class="sticky"></div>
</div>
<div>
$('.sticky').stick_in_parent({parent: '.row'});