formstone
Version:
Library of modular front end components.
86 lines (69 loc) • 2.74 kB
HTML
<h4>Basic</h4>
<!-- START: // FIRSTDEMO -->
<style>
.sticky_container { background: #eee; height: 500px; margin: 50px 0; }
.sticky_element { border-radius: 2px; color: white; font-size: 12px; height: 50px; line-height: 50px; overflow: hidden; padding: 0; text-align: center; width: 100%; margin: 10px 0; }
.sticky_element.s1 { background: #455a64; z-index: 10; }
.sticky_element.s2 { background: #00bcd4; }
.sticky_element.s3 { background: #0097A7; }
.marker {
position: fixed;
/*top: 50%;*/
right: 0;
left: 0;
width: 100%;
height: 1px;
background: red;
opacity: 0.2;
}
</style>
<!-- <div class="marker" style="top: 120px;"></div> -->
<script>
Formstone.Ready(function() {
$(".sticky_element").on("stuck.sticky", function() {
console.log("stuck", this);
}).on("unstuck.sticky", function() {
console.log("unstuck", this);
}).on("passed.sticky", function() {
console.log("passed", this);
});
});
</script>
<!-- <div class="demo_container">
<div class="demo_example"> -->
<div class="sticky_element s1 js-sticky" data-sticky-options='{"offset":50}'>Sticky Element</div>
<!-- </div>
<div class="demo_code"> -->
<pre><code class="language-html"><div class="sticky">Sticky Element</div></code></pre>
<pre><code class="language-javascript">$(".sticky").sticky({
offset: 50
});</code></pre>
<!-- </div>
</div> -->
<!-- END: // FIRSTDEMO -->
<br><br>
<h3>Container</h3>
<!-- <div class="demo_container">
<div class="demo_example"> -->
<div class="sticky_container sticky_2">
<div class="sticky_element s2 js-sticky" data-sticky-options='{"offset":120}' data-sticky-container=".sticky_2">Sticky Element</div>
</div>
<div class="sticky_container sticky_3">
<div class="sticky_element s3 js-sticky" data-sticky-options='{"offset":120}' data-sticky-container=".sticky_3">Sticky Element</div>
</div>
<div class="sticky_container sticky_4">
<div class="sticky_element s2 js-sticky" data-sticky-options='{"offset":120}' data-sticky-container=".sticky_4">Sticky Element</div>
</div>
<div class="sticky_container sticky_5">
<div class="sticky_element s3 js-sticky" data-sticky-options='{"offset":120}' data-sticky-container=".sticky_5">Sticky Element</div>
</div>
<!-- </div>
<div class="demo_code"> -->
<pre><code class="language-html"><div class="sticky_container">
<div class="sticky" data-sticky-container=".sticky_container">Sticky Element</div>
</div></code></pre>
<pre><code class="language-javascript">$(".sticky").sticky({
offset: 100
});</code></pre>
<!-- </div>
</div> -->