CodePen Embed - NWRZVWa

<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 is owned by Orlando on CodePen.

See more by @iqualia on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.