sticky-scroller
Version:
Scroll your very long sticky positioned sidebar
138 lines (122 loc) • 3.25 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>StickyScroller Demo</title>
<style>
body {
background: #fff;
padding: 0;
margin: 0;
}
header {
background: #eee;
height: 200px;
margin-bottom: 20px;
}
.wrap {
display: flex;
}
.main-wrap {
flex: 2 2 800px;
}
main {
height: 3000px;
background: repeating-linear-gradient( 0deg,
#eee,
#eee 20px,
#ddd 20px,
#ddd 40px)
}
.sidebar-wrap {
flex: 1 1 400px;
}
sidebar {
display: block;
position: sticky;
top: 0;
height: 100vh;
background: #eee;
margin-left: 20px;
padding: 0 10px;
}
sidebar ol {
margin: 0;
}
footer {
background: #eee;
height: 300px;
margin-top: 20px;
}
</style>
<script src="../../dist/sticky-scroller.js"></script>
</head>
<body>
<header></header>
<div class="wrap">
<div class="main-wrap">
<main></main>
</div>
<div class="sidebar-wrap">
<sidebar>
<ol>
<li>Thor</li>
<li>Isle of Dogs</li>
<li>The Monkey King 3: Kingdom of Women</li>
<li>Gone Girl</li>
<li>War for the Planet of the Apes</li>
<li>The Imitation Game</li>
<li>Olaf's Frozen Adventure</li>
<li>The Theory of Everything</li>
<li>Inception</li>
<li>Pirates of the Caribbean: Dead Man's Chest</li>
<li>American Pie</li>
<li>Pirates of the Caribbean: The Curse of the Black Pearl</li>
<li>15+ IQ Krachoot</li>
<li>Nightcrawler</li>
<li>Sin City: A Dame to Kill For</li>
<li>2001: A Space Odyssey</li>
<li>Insidious: The Last Key</li>
<li>Batman Begins</li>
<li>Fifty Shades Darker</li>
<li>Dracula Untold</li>
<li>Valerian and the City of a Thousand Planets</li>
<li>Saw</li>
<li>Guardians of the Galaxy</li>
<li>San Andreas</li>
<li>Meet Me In St. Gallen</li>
<li>The Incredibles</li>
<li>Dawn of the Planet of the Apes</li>
<li>Tomb Raider</li>
<li>Bridge of Spies</li>
<li>Back to the Future</li>
<li>Blade Runner</li>
<li>Transformers: The Last Knight</li>
<li>Jupiter Ascending</li>
<li>Fight Club</li>
<li>The Shape of Water</li>
<li>The Expendables</li>
<li>Star Wars: The Force Awakens</li>
<li>Pirates of the Caribbean: On Stranger Tides</li>
<li>The Twilight Saga: New Moon</li>
<li>Harry Potter and the Philosopher's Stone</li>
<li>The Lion King</li>
<li>The Twilight Saga: Eclipse</li>
<li>Fifty Shades of Grey</li>
<li>The Hitman's Bodyguard</li>
<li>Ex Machina</li>
<li>Insurgent</li>
<li>Twilight</li>
<li>The Wolf of Wall Street</li>
<li>Iron Man</li>
<li>Hercules</li>
</ol>
</sidebar>
</div>
</div>
<footer></footer>
<script>
new StickyScroller('sidebar')
</script>
</body>
</html>