<header>
Soy un header
</header>
<main>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, mollitia.</p>
</main>
header {
padding: 2rem 1rem;
color: #fff;
background: #232946;
border: solid .1rem transparent;
}
@media (min-height: 500px) {
header {
position: sticky;
top: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.