<div class="stuckOnTop">
    <div class="stuckOnTopContents">
      <h2>Jabberwocky</h2>
    </div>
  </div>

  <div class="poem">
  <h2>Jabberwocky</h2>
  <p>`Twas brillig, and the slithy toves<br />
    Did gyre and gimble in the wabe:<br />
  All mimsy were the borogoves,<br />
    And the mome raths outgrabe.
  </p><p>
  "Beware the Jabberwock, my son!<br />
    The jaws that bite, the claws that catch!<br />
  Beware the Jubjub bird, and shun<br />
    The frumious Bandersnatch!"
  </p><p>
  He took his vorpal sword in hand:<br />
    Long time the manxome foe he sought --<br />
  So rested he by the Tumtum tree,<br />
    And stood awhile in thought.
  </p><p>
  And, as in uffish thought he stood,<br />
    The Jabberwock, with eyes of flame,<br />
  Came whiffling through the tulgey wood,<br />
    And burbled as it came!
  </p><p>
  One, two! One, two! And through and through<br />
    The vorpal blade went snicker-snack!<br />
  He left it dead, and with its head<br />
    He went galumphing back.
  </p><p>
  "And, has thou slain the Jabberwock?<br />
    Come to my arms, my beamish boy!<br />
  O frabjous day! Callooh! Callay!'<br />
    He chortled in his joy.
  </p><p>
  `Twas brillig, and the slithy toves<br />
    Did gyre and gimble in the wabe;<br />
  All mimsy were the borogoves,<br />
    And the mome raths outgrabe.
    </p>
  </div>
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);

.stuckOnTopContents {
    background: #eee;
    border-bottom: 1px solid #dedede;
    transition: 0.2s;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -45px;
    overflow: hidden;
    text-align: center;
    font-family: 'Shadows Into Light Two', cursive;
  }
  .stuckOnTopContents p {
    font-size: 1.3em;
  }
  .stuckOnTopContents.downItGoes {
    top: 0px;
  }
  .stuckOnTop {
    z-index: 10;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
  }
  .stuckOnTop h2 {
    margin-top: 3px;
  }
  .poem {
    text-align: center;
    margin-bottom: 1000px;
    font-family: 'Shadows Into Light Two', cursive;
  }

p { line-height: 1.4em; margin-bottom: 1.4em;}
h2 { font-weight: bold; line-height: 2em; margin-top: 10px; }
 $(function() {

    $(window).scroll(function() {
         $(".stuckOnTopContents").toggleClass("downItGoes", $(window).scrollTop() > 100);
    });

  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js