scroll-padding-top
Sets the top padding of a scroll container to adjust scroll snap positions. The most effective way to fix content being hidden behind a sticky/fixed header.
Class List
Pattern: spt{value}{unit}
| Class | CSS | Description |
|---|---|---|
spt0 | scroll-padding-top: 0 | No scroll padding |
spt8px | scroll-padding-top: 8px | 8px padding |
spt16px | scroll-padding-top: 16px | 16px padding |
spt2rem | scroll-padding-top: 2rem | 20px padding |
spt4rem | scroll-padding-top: 4rem | 40px padding |
spt6rem | scroll-padding-top: 6rem | 60px padding (typical header height) |
spt8rem | scroll-padding-top: 8rem | 80px padding |
spt10rem | scroll-padding-top: 10rem | 100px padding |
Usage Examples
<!-- Top padding on scroll container -->
<html class="spt6rem">
<!-- All anchor links (#id) positioned 60px below -->
</html>
<!-- Scroll snap + padding -->
<div class="spt4rem oya h100vh">
<section id="s1">Section 1</section>
<section id="s2">Section 2</section>
</div>Key Pattern: Fixed Header Compensation
Fixes content being obscured by a fixed header when navigating via anchor links (#id).
<!-- Page with fixed header -->
<html class="spt8rem">
<body>
<header class="pf t0 l0 w100p h6rem bg000000 zi100">
<nav>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Anchor navigation positions at 80px below header -->
<section id="about">...</section>
<section id="contact">...</section>
</body>
</html>Tips & Notes
scroll-padding-top vs scroll-margin-top
spt only needs to be set once on the scroll container (usually html) to apply to all anchors. smt requires individual settings on each target element.
Match the Header Height
Set scroll-padding-top equal to or slightly larger than the fixed header height. For a 60px header, use spt6rem or spt8rem.