198 lines
6.7 KiB
HTML
198 lines
6.7 KiB
HTML
|
<!doctype 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="http://foundation.zurb.com/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="http://foundation.zurb.com/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="http://foundation.zurb.com/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="http://foundation.zurb.com/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="http://foundation.zurb.com/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="http://foundation.zurb.com/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="http://foundation.zurb.com/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="http://foundation.zurb.com/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>
|