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>
You first need to define an id (like id="stickyElem") for the element above of your sticky element which in your html has class of class="two cell small-12 large-4".
Then in your sticky element, set this parameters:
<div class="content sticky" data-sticky data-margin-top="0" data-top-anchor="stickyElem:bottom"></div>
Below html structure with inline css and javascript will show it in a one index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"></script>
<title>Document</title>
<style>
html, body {
height: 100%;
}
.nav {
height: 100px;
background: #cacaca;
}
.main .one {
height: 500px;
background: #1779ba;
}
.main .two {
height: 500px;
background: #0c659d;
}
.main .three {
height: 200px;
}
.main .three .content {
height: 200px;
background: #0b7a00;
}
.random {
height: 2000px;
background: red;
}
</style>
</head>
<body>
<main>
<div class="nav">
<div class="gridcontainer">
<div class="grid-x">
<div class="content"><h1>Header</h1></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"><h1>Content1</h1></div>
</div>
<div class="two cell small-12 large-4" id="abcd">
<div class="content"><h1>Content2</h1></div>
</div>
<div class="three cell small-12" data-sticky-container>
<div class="content sticky" data-sticky data-margin-top="0" data-top-anchor="abcd:bottom"><h1>Sticky Div</h1></div>
</div>
</div>
</div>
</section>
<section class="random">
<div class="gridcontainer">
<div class="grid-x">
<div class="content">
<h1>Some Text 1</h1><br><br><br>
<h1>Some Text 2</h1><br><br><br>
<h1>Some Text 3</h1><br><br><br>
<h1>Some Text 4</h1><br><br><br>
<h1>Some Text 5</h1><br><br><br>
<h1>Some Text 6</h1><br><br><br>
<h1>Some Text 7</h1><br><br><br>
</div>
</div>
</div>
</section>
</main>
<script> $(document).foundation(); </script>
</body>
</html>