Combining scroll snap, Intersection Observer and position: sticky
A Pen by Stan Williams on CodePen.
Stan Williams stanwmusic
🏠
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <nav> | |
| <ul> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#bio">Bio</a></li> | |
| <li><a href="#links">Links</a></li> | |
| <li><a href="#about">About</a></li> | |
| </ul> | |
| </nav> | |
| </header> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <nav> | |
| <ul> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#bio">Bio</a></li> | |
| <li><a href="#links">Links</a></li> | |
| <li><a href="#about">About</a></li> | |
| </ul> | |
| </nav> | |
| </header> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| - 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 |
stanwmusic
/ dinosaur-park-scroll-snap-demo.markdown
Created
July 10, 2025 06:23
Dinosaur Park scroll snap demo
stanwmusic
/ classic-sticky-footer-with-angular-material.markdown
Created
July 10, 2025 06:21
Classic "sticky footer" with angular-material
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--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"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| - 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") |
stanwmusic
/ challenge-may-testimonial-quotes.markdown
Created
July 10, 2025 06:13
Challenge May: Testimonial quotes
A Pen by Stan Williams on CodePen.
NewerOlder