<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sticky Position Example</title> <style> * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .placeholder-example { background: lavender; height: 100vh; padding: 1em; } .sticky-example { background: cornflowerblue; padding: 1em; } .sticky { position: sticky; top: 0; } </style> </head> <body> <div class="sticky-example sticky">Sticky</div> <div class="placeholder-example">Placeholder</div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter