hc-sticky
Version:
JavaScript library that makes any element on your page visible while you scroll
79 lines (72 loc) • 3.24 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>HC Sticky</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,900">
<link rel="stylesheet" href="demo.css">
</head>
<body class="home">
<h1>HC Sticky</h1>
<h3>Cross-browser plugin that makes any element on your page visible while you scroll</h3>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Default - bigger than window</h2>
<p>Page with a sidebar that is bigger than window height. Sidebar should stick to the bottom of the page when scrolled down, and to the top of the page when scrolled up.</p>
<p><a href="./demo_1.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Default - smaller than window</h2>
<p>Page with a sidebar that is smaller than window height. Sidebar should stick to the top of the page when scrolled down or up.</p>
<p><a href="./demo_2.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Multiple Stickies</h2>
<p>Nice example showing multiple stickies on one page.</p>
<p><a href="./demo_3.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Inner Sticker</h2>
<p>Use <code>innerSticker</code> option to stick at a certain element. In this example, sticky will stick to the second box inside the sidebar only when you go <strong>up</strong>. When you go down it sticks to the bottom of the sidebar.</p>
<p><a href="./demo_4.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Inner Sticker not following scroll</h2>
<p>Use <code>innerSticker</code> option to stick at a certain element, and <code>followScroll:false</code> so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick to the second box inside the sidebar when you go <strong>down</strong> or <strong>up</strong>.</p>
<p><a href="./demo_5.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Inner Top not following scroll</h2>
<p>Use <code>innerTop</code> option to stick after a certain distance, and <code>followScroll:false</code> 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 <strong>down</strong> or <strong>up</strong>.</p>
<p><a href="./demo_6.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Browserify test</h2>
<p>HC-Sticky called through browserify.</p>
<p><a href="./demo_browserify.html" target="_blank">Launch Demo</a></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>jQuery test</h2>
<p>HC-Sticky called with jQuery.</p>
<p><a href="./demo_jquery.html" target="_blank">Launch Demo</a></p>
</li>
</ul>
<a href="http://somewebmedia.com" target="_blank" id="swm">Some Web Media</a>
</body>
</html>