UNPKG

formstone

Version:

Library of modular front end components.

86 lines (69 loc) 2.74 kB
<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">&lt;div class=&quot;sticky&quot;&gt;Sticky Element&lt;/div&gt;</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">&lt;div class=&quot;sticky_container&quot;&gt; &lt;div class=&quot;sticky&quot; data-sticky-container=&quot;.sticky_container&quot;&gt;Sticky Element&lt;/div&gt; &lt;/div&gt;</code></pre> <pre><code class="language-javascript">$(".sticky").sticky({ offset: 100 });</code></pre> <!-- </div> </div> -->