hc-sticky
Version:
JavaScript library that makes any element on your page visible while you scroll
162 lines (138 loc) • 2.67 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Inner Top not following scroll</title>
<meta name="description" content="Use `innerTop` option to stick after a certain distance, and `followScroll:false` so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick 200px from top inside the sidebar when you go *down* or *up*.">
<link rel="stylesheet" href="demo.css">
<script src="hc-sticky.js"></script>
</head>
<body class="demo demo_6">
<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>
<li></li>
</ul>
</div>
<ul id="stickMe">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
</main>
<footer>
<span></span>
<span></span>
<span></span>
</footer>
<script>;
var Sticky = new hcSticky('aside', {
stickTo: 'main',
innerTop: 200,
followScroll: false,
responsive: {
980: {
disable: true
}
}
});
</script>
</body>
</html>