hc-sticky
Version:
JavaScript library that makes any element on your page visible while you scroll
100 lines (85 loc) • 1.66 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Stickies</title>
<meta name="description" content="Nice example showing multiple stickies on one page.">
<link rel="stylesheet" href="demo.css">
<script src="hc-sticky.js"></script>
</head>
<body class="demo demo_3">
<main>
<article>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</article>
<article>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</article>
<article>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</article>
<article>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</article>
<article>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</article>
</main>
<script>;
var elements = document.getElementsByTagName('figure');
for (var i = 0; i < elements.length; i++) {
new hcSticky(elements[i], {
stickTo: elements[i].parentNode,
top: 20,
bottomEnd: 30
});
}
</script>
</body>
</html>