<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu eu mi fermentum varius. Mauris dui mi, tempus ut quam ut, faucibus tincidunt odio. Nulla eget velit tortor. Maecenas tortor magna, varius in rhoncus sed, tempus sit amet nunc. Nullam sed tristique diam. Integer id tempus enim. Mauris molestie metus urna, id convallis purus egestas sollicitudin. Phasellus eget diam non metus gravida iaculis.<p>

  <div class="box"></div>  

  <p>Etiam ut neque tincidunt, bibendum metus a, facilisis magna. Suspendisse aliquam orci in molestie egestas. Integer lacus nibh, molestie volutpat convallis eget, tincidunt vitae dui. Vivamus ac porta mauris, vitae pretium odio. Aliquam volutpat, felis ac dapibus finibus, risus ante pretium ipsum, in accumsan felis sem laoreet sapien. Ut malesuada, quam a consectetur efficitur, quam mi molestie lectus, aliquam ultrices quam sapien hendrerit quam. Suspendisse iaculis ante sed tellus porttitor convallis. Donec quis vehicula eros. Sed semper dapibus sem, vel fringilla sem tempor sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc magna dolor, ultricies a justo sit amet, lacinia accumsan felis. Nullam feugiat justo erat, pharetra pulvinar enim porta eu. Donec at dui erat.</p>

  <p>Nullam commodo tellus eget metus sagittis facilisis. Curabitur viverra nec eros ac lacinia. Mauris eu velit ut ipsum posuere fermentum sit amet nec metus. Pellentesque quis tellus nulla. Fusce cursus hendrerit ante, at lacinia ante tempor ut. Nulla in nunc laoreet, egestas ipsum vel, iaculis magna. Integer vitae eleifend ligula. Nullam eget dapibus ligula, at tristique lectus. Duis convallis neque sit amet nisl tincidunt consequat. Mauris sit amet dolor pretium, fermentum dui sed, pellentesque eros. Phasellus posuere arcu erat, at elementum lectus vestibulum at.</p>

  <p>Etiam eu gravida odio, eget rhoncus orci. Donec nulla lacus, auctor nec varius in, faucibus eu est. Ut et iaculis arcu. Nam nec tellus sapien. Duis euismod sem volutpat mi tincidunt ullamcorper. Fusce mattis odio mauris, ac gravida nisi fringilla at. Maecenas sit amet placerat nisi, id imperdiet ante. Etiam sed neque et tellus vestibulum consectetur quis non justo. Mauris varius in quam id faucibus. Vestibulum feugiat molestie consequat. Duis dapibus pellentesque dui sit amet pharetra. Donec luctus risus vitae quam rutrum, a tincidunt risus ultricies. Nam lacus justo, consectetur id ni</p>
</div>
.box {
  position: sticky;
  top: 10px;
}

/* Base styles */

.box {
  width: 100px;
  height: 100px;
  background: lightblue;
}

.container {
  padding: 20px;
  margin: auto;
  max-width: 500px;
}

body {
  margin: 0px;
  font-size: 1.25rem;
  line-height: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.