Combining scroll snap, Intersection Observer and position: sticky
A Pen by Stan Williams on CodePen.
- var photos = ['https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1497671954146-59a89ff626ff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50', 'https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50', 'https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50 |
Combining scroll snap, Intersection Observer and position: sticky
A Pen by Stan Williams on CodePen.
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>Sticky Notes board</title> | |
<meta name="description" content="Sticky Notes by Edmond Ko"> | |
<meta name="author" content="Edmond Ko"> | |
<link href='https://fonts.googleapig🚗s.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'> | |
</head> | |
<body> |
<!--top header--> | |
<header > | |
<!--most top info --> | |
<div style="height: 40px; background: #f2f9ee"></div> | |
<!-- End most top info --> | |
<nav class="navbar navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll"> | |
<div class="container"> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
- const ITEMS_COUNT = 95 | |
- const DATA_COUNT = 20 | |
.card | |
.table-title | |
h2 CSS ONLY TABLE | |
.button-container | |
span These buttons aren't working > | |
button.danger(title="Delete Selected") | |
svg(viewBox="0 0 448 512" width="16" title="trash-alt") | |
path(d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z") |
A Pen by Stan Williams on CodePen.
<header> | |
<nav> | |
<ul> | |
<li><a href="#portfolio">Portfolio</a></li> | |
<li><a href="#press">Press</a></li> | |
<li><a href="#shop">Shop</a></li> | |
<li><a href="#about">About</a></li> | |
</ul> | |
</nav> | |
</header> |
<div class="wrapper"> | |
<div class="main"> | |
<h2>Main content</h2> | |
<p>Scroll down the page!</p> | |
<h3>How to recreate this</h3> | |
<p> | |
Position the columns with flex. Then apply two lines of CSS to the sidebar to make it sticky: | |
<pre> | |
.sidebar { | |
position: sticky; |