I am not entirely sure how Foundation sticky works. An element within a section needs to be sticky when the top of the viewport hits the element, not immediately. There are multiple sections on the page and the element that needs to be sticky might be further down the page, below another section. After the top of the viewport hits the element, it should be sticky all the way down.
The element becomes sticky immediately after you hit the scroll button, not when the top of the viewport hits it. I tried many data-anchors and played around with data-sticky-containers, but I can't seem to make it work. Maybe it is more difficult because the element that needs to be sticky is inside of a section and it's not a section of its own. But I can't change the HTML structure.
I created a Codepen to display and play with the issue here: https://codepen.io/vialito/pen/yLQMQZR
This is the HTML, I hope someone can help me out!
<main>
<div class="nav">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"></div>
</div>
</div>
</div>
<section class="main">
<div class="gridcontainer">
<div class="grid-x">
<div class="one cell small-12 large-8">
<div class="content"></div>
</div>
<div class="two cell small-12 large-4">
<div class="content"></div>
</div>
<div class="three cell small-12" data-sticky-container>
<div class="content sticky" data-sticky data-margin-top="0"></div>
</div>
</div>
</div>
</section>
<section class="random">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"></div>
</div>
</div>
</section>
</main>
from Foundation Sticky | Element should stick when the top of viewport hits it, not immediately
No comments:
Post a Comment