sticky-state
Version:
StickyState is a high performant module making native position:sticky statefull and polyfill the missing sticky browser feature
78 lines (68 loc) • 17 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>stickystate headroom</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="../dist/sticky-state.css">
<script src="../dist/sticky-state.min.js"></script>
</head>
<body>
<header class="headroom sticky">
<div class="center">
<h1>Hello World</h1>
</div>
</header>
<main style="width: 3000px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<h2 class="sticky left-headline">scroll horizontal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum dicta a, incidunt facilis eos asperiores, ducimus fuga rerum vitae architecto provident dolorem saepe atque nisi at quam harum debitis soluta eveniet inventore quo quasi ullam! Provident quas id, rem commodi tempore nostrum quis unde repellendus eius praesentium, omnis placeat? Dolor omnis, excepturi quidem sunt officia veniam doloremque accusantium laudantium.</p>
</main>
<script>
new StickyState(document.querySelector('.headroom'), {
scrollClass:{
down: 'headroom-scroll-down',
up: 'headroom-scroll-up',
persist: true
}
});
new StickyState(document.querySelector('.left-headline'));
</script>
</body>
</html>