hc-sticky
Version:
JavaScript library that makes any element on your page visible while you scroll
138 lines (116 loc) • 2.16 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Default - smaller than window</title>
<meta name="description" content="Page with a sidebar that is smaller than window height. Sidebar should stick to the top of the page when scrolled down or up.">
<link rel="stylesheet" href="demo.css">
<script src="hc-sticky.js"></script>
</head>
<body class="demo demo_2">
<header>
<figure></figure>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
<section>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</article>
<aside>
<div>
<h3></h3>
<ul>
<li></li>
<li></li>
</ul>
</div>
<ul>
<li></li>
<li></li>
</ul>
</aside>
</main>
<footer>
<span></span>
<span></span>
<span></span>
</footer>
<script>;
var Sticky = new hcSticky('aside', {
stickTo: 'main',
responsive: {
980: {
disable: true
}
}
});
</script>
</body>
</html>