.container {
background-color: rgba(255,0,0,0.7);
-
+
}
.foo {
color: white;
}
+ .megafoo {
+ height:50rem;
+ color: white;
+ }
+
+ .bar {
+ color: white;
+ }
+
.foo h1 {
display: inline-block;
float: right;
}
- .foo:nth-child(odd) {
+ .foo:nth-child(odd), .bar:nth-child(odd), .megafoo:nth-child(odd) {
background-color: lightgreen;
}
- .foo:nth-child(even) {
+ .foo:nth-child(even), .bar:nth-child(even), .megafoo:nth-child(even) {
background-color: lightblue;
}
</head>
<body>
-
+
<div class="row">
<div class="small-12 medium-2 columns">
<div class="callout sticky" 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>
+ <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 class="callout sticky" 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>
+ <a href="http://foundation.zurb.com/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div class="callout sticky" 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>
+ <a href="http://foundation.zurb.com/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div class="callout sticky" data-sticky 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>
+ <a href="http://foundation.zurb.com/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
<div class="callout sticky" data-sticky 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>
+ <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-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-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-margin-top="0" data-anchor="foo3">
- <h5>Test 6</h5>
+ <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>
+ <a href="http://foundation.zurb.com/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
