data-steady="top"
<div id="top-before" data-steady="top"> ...content... </div>
This purple section represents content placed at the top of the document before sticky content.
data-steady="sticky"
<div id="top-sticky" data-steady="sticky"> ...content... </div>
This blue section represents content placed at the top of the document that should stick, such as a navbar.
data-steady="top"
<div id="page-before" data-steady="top"> ...content... </div>
This green section represents content placed at the top of the page.
Page Content
height: var(--th);
⛰ steady-viewport Demo
Minimal page structure showcasing the layout features of steady-viewport.
This "top height" hero section is sized using the --th CSS variable for pixel-perfect height. Its height is simply --vh minus the height of any children of the <body> element marked with the data-steady="top" or data-steady="sticky" attributes.
Go To GitHub Repository
height: var(--ph);
This "page height" section is sized using the --ph CSS variable for pixel-perfect height. Its height is simply --vh minus the height of any children of the <body> element marked with the data-steady="sticky" attribute.
If you are on a mobile device and the height appears to be too short, remember that if your URL navigation bar or some other UI element has shrunk then there will be a bit of extra vertical space that was intentionally ignored by --vh.
height: var(--bh);
This "bottom height" section is sized using the --bh CSS variable for pixel-perfect height. Its height is simply --vh minus the height of any children of the <body> element marked with the data-steady="bottom" or data-steady="sticky" attributes.
data-steady="bottom"
<div id="page-after" data-steady="bottom"> ...content... </div>
This orange section represents content placed at the bottom of the page.
data-steady="sticky"
<div id="bottom-sticky" data-steady="sticky"> ...content... </div>
This pink section represents content placed at the bottom of the document that should stick, such as a cookie or promotional banner.
data-steady="bottom"
<div id="bottom-after" data-steady="bottom"> ...content... </div>
This teal section represents content placed at the bottom of the document after sticky content.