<main>
  <section>
    <div class="section-heading">
      <h2>First Section</h2>
      <div class="social-links">
        <a class="social-btn" href="#"><i class="fa fa-twitter"></i></a>
        <a class="social-btn" href="#"><i class="fa fa-facebook"></i></a>
        <a class="social-btn" href="#"><i class="fa fa-link"></i></a>
      </div>
    </div>
    <div class="card">
      <p>Winter is coming. Can a man still be brave if he’s afraid? That is the only time a man can be brave. The Dothraki do things in their own time, for their own reasons. Forgive my manners. I don't see many ladies these days. Lucky for the ladies. The rains of castamere. A storm of swords. What is dead may never die. A forked purple lightning bolt, on black field speckled with four-pointed stars. Never Resting. The winds of Winter.</p>
      <p>Fire and blood. Forgive my manners. I don't see many ladies these days. Lucky for the ladies. House Tarly of Horn Hill The War of the 5 kings. The winds of Winter. A storm of swords. The night is dark and full of terrors.</p>
      <p>Our Sun Shines Bright. More pigeon pie, please. Unbowed, Unbent, Unbroken. Unbowed, Unbent, Unbroken. A dance of dragons. πŸ‰ It's ten thousand miles between Kings landing and the wall. Forgive my manners. I don't see many ladies these days. Lucky for the ladies.</p>
      <p class="text-source">Text generated from <a href="http://gameofthronesipsum.richfinelli.com/" target="_blank" rel="noopener noreferrer">Game of Thrones Ipsum</a>.</p>
    </div>
  </section>
  <section>
    <div class="section-heading">
      <h2>Second Section</h2>
      <div class="social-links">
        <a class="social-btn" href="#"><i class="fa fa-twitter"></i></a>
        <a class="social-btn" href="#"><i class="fa fa-facebook"></i></a>
        <a class="social-btn" href="#"><i class="fa fa-link"></i></a>
      </div>
    </div>
    <div class="card">
      <p>Arabica Acerbic Affogato Aftertaste Aged Americano And Aroma trade arabica spice, As beans froth cup mug pumpkin ristretto cream Beans Barista, caffeine skinny variety roast chicory et breve est. β˜• Macchiato medium latte trade Bar half Au au at mug, spice fair java mazagran americano Aged strong kopi-luwak iced mocha, extraction cinnamon ristretto Aromatic Arabica that panna Acerbic pot.</p>
      <p>Aftertaste Barista so origin and fair froth aftertaste, mocha dripper cream lungo cortado black mountain, affogato rich americano extraction arabica frappuccino. Sugar And shot affogato Aroma breve grounds brewed extra pumpkin, white cappuccino robusta in sweet ristretto filter ut Americano, that Affogato viennese extraction carajillo half Barista mocha.</p>
      <p>And extraction shop cream wings Con At froth cinnamon panna acerbic origin siphon, And fair mazagran plunger strong bar filter Cappuccino body robusta aftertaste. Cinnamon aroma sweet spice dripper cappuccino shop viennese, rich beans organic Black half trade, Aromatic mug skinny carajillo frappuccino Americano.</p>
      <p class="text-source">Text generated from <a href="https://fungenerators.com/lorem-ipsum/coffee/" target="_blank" rel="noopener noreferrer">Coffee Ipsum Generator</a>.</p>
    </div>
  </section>
  <section>
    <div class="section-heading">
      <h2>Third Section</h2>
      <div class="social-links">
        <a class="social-btn" href="#"><i class="fa fa-twitter"></i></a>
        <a class="social-btn" href="#"><i class="fa fa-facebook"></i></a>
        <a class="social-btn" href="#"><i class="fa fa-link"></i></a>
      </div>
    </div>
    <div class="card">
      <p>The hair is just too polarising pass the mayo, appeal to the client, sue the vice president but is there a way we can make the page feel more introductory without being cheesy</p>
      <p>remember, everything is the same or better so can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit</p>
      <p>make the picture of the cupcake look delicious 🧁 make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site?</p>
      <p>oh no it looks messed up! i think we need to start from scratch for make the font bigger. I think this should be fairly easy so if you just want to have a look make the font bigger is this the best we can do, yet can we try some other colours maybe.</p>
      <p class="text-source">Text generated from <a href="ff678b" target="_blank" rel="noopener noreferrer">Office Ipsum</a>.</p>
    </div>
  </section>
</main>
<footer>Peekabo! πŸ‘‹ I wrote a little about this on <a href="https://dev.to/aileenr/sticky-section-headers-506k" target="_blank" rel="noopener noreferrer">Dev.to</a>.</footer>
main {
  margin: auto;
  // extra margin to test scrolling
  margin-bottom: 80vh;
  max-width: 900px;
  padding: 15px;

  section {
    align-items: flex-start;
    display: flex;
    margin: 15px 0;

    .section-heading {
      flex: 0 0 33%;
      padding: 10px 15px;
      position: sticky;
      text-align: right;
      top: 0;
    }

    .card {
      p:first-of-type {
        margin-top: 0;
      }

      p:last-of-type {
        margin-bottom: 0;
      }

      .text-source {
        font-size: 0.8rem;
      }
    }
  }
}

// Remove sticky on mobile
@media (max-width: 600px) {
  main {
    section {
      flex-direction: column;

      .section-heading {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 10px 0 10px 15px;
        text-align: left;
        width: 100%;

        h2 {
          margin-bottom: 0;
        }
      }

      .card {
        padding: 15px;
      }
    }
  }
}

// Making it look nice

*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.1rem;
}

body {
  background-color: #fffffe;
  color: #594a4e;
  line-height: 1.5;
}

h2 {
  color: #33272a;
  font-size: clamp(1.3rem, -0.875rem + 5vw, 1.8rem);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  margin-bottom: 10px;
}

.section-heading {
  background-color: #fffffe;
}

.card {
  background-color: #faeee7;
  border-radius: 10px;
  padding: 15px 20px;
}

a {
  color: #d71442;
  text-decoration: none;

  &:hover {
    color: #426247;
  }
}

.social-links {
  display: flex;
  justify-content: flex-end;

  .social-btn {
    background-color: #ffc6c7;
    border-radius: 50%;
    display: inline-block;
    height: clamp(30px, -0.875rem + 8vw, 35px);
    position: relative;
    width: clamp(30px, -0.875rem + 8vw, 35px);

    &:not(:last-of-type) {
      margin-right: 4px;
    }

    &:hover {
      background-color: #c3f0ca;
    }

    > * {
      color: #33272a;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

footer {
  font-size: 0.8rem;
  padding: 15px;
  text-align: center;
  width: 100%;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.