Sticky Header
position: sticky aur top offset se scrolling container me header ko top par hold karo.
Working code
<div class="page">
<header class="site-header">BrounStack</header>
<main>
<p>Scroll the page to see the header stay at the top.</p>
</main>
</div>
<style>
.site-header {
position: sticky;
top: 0;
z-index: 10;
padding: 16px;
background: white;
border-bottom: 1px solid #dce8f5;
}
main {
min-height: 120vh;
padding: 20px;
}
</style>Preview
BrounStack — sticky
Scroll inside this preview.
Learning content…
More content…
More content…
Learning content…
More content…
More content…
How it works
position: sticky element ko normal flow me rakhta hai jab tak specified offset reach na ho.
top: 0 sticky threshold define karta hai. Sticky behavior nearest scrolling ancestor aur available scroll space par depend karta hai.
Try Yourself
<div class="page">
<header class="site-header">BrounStack</header>
<main>
<p>Scroll the page to see the header stay at the top.</p>
</main>
</div>
<style>
.site-header {
position: sticky;
top: 0;
padding: 20px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
</style>