<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);
});
});
This Pen doesn't use any external CSS resources.