formstone
Version:
Library of modular front end components.
156 lines (135 loc) • 5.87 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Sticky · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="sticky-demo">Sticky Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/sticky">View Documentation</a></p>
<!-- START: DEMO -->
<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> -->
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>