foundation-sites
Version:
The most advanced responsive front-end framework in the world.
198 lines (179 loc) • 6.86 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
body {
background-color: darkgrey;
}
.container {
background-color: rgba(255,0,0,0.7);
}
.foo {
height: 30rem;
color: white;
}
.megafoo {
height:50rem;
color: white;
}
.bar {
color: white;
}
.foo h1 {
display: inline-block;
float: right;
}
.foo:nth-child(odd), .bar:nth-child(odd), .megafoo:nth-child(odd) {
background-color: lightgreen;
}
.foo:nth-child(even), .bar:nth-child(even), .megafoo:nth-child(even) {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="row">
<div class="small-12 medium-2 columns">
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky-on="small" data-sticky data-margin-top="0" data-anchor="foo1">
<h5>Test 1</h5>
<p>I should stick to the top and bottom of #foo1. I'm not a child of any #foo's.</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div class="small-12 medium-7 columns">
<div id="foo1" class="foo">
<h1>#foo1</h1>
</div>
<div id="foo2" class="foo">
<h1>#foo2</h1>
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky-on="small" data-sticky data-margin-top="0" data-anchor="foo2">
<h5>Test 2</h5>
<p>I should stick to the top and bottom of #foo2.<br/>I'm also a child of #foo2</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div id="foo3" class="foo">
<h1>#foo3</h1>
</div>
<div id="foo4" class="foo">
<h1>#foo4</h1>
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky-on="small" data-sticky data-margin-top="0" data-top-anchor="foo4" data-btm-anchor="foo6">
<h5>Test 3</h5>
<p>I should stick to the top of #foo4 and the top of #foo6.<br/>I'm a child of #foo4</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div id="foo5" class="foo">
<h1>#foo5</h1>
</div>
<div id="foo6" class="foo">
<h1>#foo6</h1>
</div>
<div id="foo7" class="foo">
<h1>#foo7</h1>
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-top-anchor="foo6" data-btm-anchor="foo8:bottom">
<h5>Test 4</h5>
<p>I should stick to the top of #foo6 and the bottom of #foo8. I'm a child of #foo7.</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div id="foo8" class="foo">
<h1>#foo8</h1>
</div>
<div id="foo9" class="foo">
<h1>#foo9</h1>
</div>
<div id="foo10" class="foo">
<h1>#foo10</h1>
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-stick-to="bottom" data-top-anchor="foo10" data-btm-anchor="foo11:bottom">
<h5>Test 5</h5>
<p>I should stick to the top of #foo10 and the bottom of #foo11. I should be stick to the window bottom with a bottom margin of 1em (default bottom margin).</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div id="foo11" class="foo">
<h1>#foo11</h1>
</div>
<div id="bar1" class="bar">
<h1>#bar1</h1>
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-top-anchor="bar2" data-btm-anchor="bar3:bottom">
<h5>Test 6</h5>
<p>I should stick to the top of #bar2 and the bottom of #bar3.</p>
<p>Bar containers does not have fixed height, but i should be anchored correctly.</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
<p>Lorem Ipsum</p>
</div>
<div id="bar2" class="bar">
<h1>#bar2</h1>
<p>Lorem</p>
</div>
<div id="bar3" class="bar">
<h1>#bar3</h1>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
<div id="bar4" class="bar">
<h1>#bar4</h1>
<p>Lorem</p>
<p>Ipsum</p>
</div>
<div id="foo13" class="megafoo">
<h1>#foo13</h1>
<p>I'm big to force scroolbar</p>
</div>
<div id="foo12" class="foo">
<h1>#foo12</h1>
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-top-anchor="foo12">
<h5>Test 7</h5>
<p>I should stick to the top of #foo12. I should be stick until window end because only data-top-anchor is set.</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div id="foo13" class="foo">
<h1>#foo13</h1>
</div>
<div id="foo14" class="foo">
<h1>#foo14</h1>
</div>
<div id="foo15" class="megafoo">
<h1>#foo15</h1>
<p>I'm big to force scroolbar</p>
</div>
</div>
<div class="small-12 medium-3 columns">
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-anchor="foo3">
<h5>Test 8</h5>
<p>I should stick to the top and bottom of #foo3.<br/>I'm not the child of any of you #foo's.<br/>When I'm not stuck I jump to the top because I'm not a child of the top anchor, is this my normal behavior?</p>
<a href="https://get.foundation/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>