Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="doc">
  <div id="lipsum">
<h1>Just keep swimming</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate sapien id dolor porttitor, in egestas magna scelerisque. Morbi eget sapien consequat leo placerat varius eu eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor mollis purus, nec vulputate mauris tempus ac. Donec accumsan sit amet magna in pharetra. Nam porttitor dictum mauris, et vulputate mi hendrerit at. Vivamus a mauris vulputate, egestas leo sit amet, tempor felis. Duis quis felis velit.
</p>
<p>
Praesent in hendrerit nunc. Maecenas vel libero dapibus, fermentum dolor vitae, pretium ex. Aliquam sollicitudin augue lorem, sit amet posuere ligula sodales at. Sed erat augue, convallis at massa in, eleifend dapibus sapien. Proin gravida enim lacinia lacus ornare mattis. Praesent scelerisque neque rhoncus bibendum euismod. Donec eleifend risus sed justo facilisis, a convallis mauris congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a erat cursus, semper augue ac, pellentesque nisi. Sed sed arcu fringilla, imperdiet purus id, ultricies mi.
</p>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque ipsum elit, feugiat sed pellentesque sed, cursus id lorem. Vestibulum tincidunt, nisl faucibus elementum dictum, ligula enim varius massa, eu dapibus lectus augue ac ante. Etiam a enim id nisl facilisis pulvinar non sit amet lectus. Morbi lorem dolor, varius eget enim a, accumsan luctus magna. Suspendisse potenti. Sed tempor metus vel velit luctus, non placerat ipsum tempus. Curabitur nec mauris eget dui ultrices elementum id vel dolor. Duis sodales convallis maximus. Fusce efficitur commodo magna, nec lobortis lacus tincidunt et. Vivamus tempor dolor sit amet magna sollicitudin, et luctus libero tincidunt. Quisque eu nisi non mauris tincidunt molestie nec nec nunc.
</p>
<p>
Fusce eu magna dictum, ullamcorper magna a, elementum massa. Praesent fringilla, sapien at scelerisque tincidunt, nisi augue accumsan libero, tristique egestas erat dolor vel dolor. Integer ut scelerisque leo, sit amet tincidunt diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tristique arcu eros, sed hendrerit urna accumsan sit amet. Duis ac efficitur nulla. Proin augue est, viverra et elit quis, consequat tempus mauris. Ut turpis purus, sagittis eget hendrerit ac, condimentum vitae ligula.
</p>
<p>
Praesent commodo tincidunt magna, eget mollis purus ultricies eu. Maecenas feugiat in nunc ac rhoncus. Vestibulum neque est, dapibus porttitor tristique vitae, tempor et turpis. Sed maximus aliquam tincidunt. Maecenas imperdiet tempor feugiat. Praesent luctus iaculis massa, at faucibus enim hendrerit et. Quisque rutrum, ipsum ut aliquam tincidunt, ipsum enim semper metus, a auctor erat erat et ligula. Fusce mollis, lectus sit amet gravida venenatis, tellus neque lacinia lorem, a ornare leo orci non tortor. Mauris non ligula tempor, gravida turpis at, efficitur erat. Donec nec pharetra lectus, eu dictum dolor. Donec vitae lacus ligula.
</p>
<p>
Sed in tempus urna. Nulla enim mi, mattis vel libero vitae, commodo convallis dui. Integer dictum magna sit amet tempor consequat. Morbi bibendum scelerisque gravida. Suspendisse fringilla nibh id quam aliquam, vel molestie nisi pellentesque. Aliquam erat volutpat. Sed sit amet commodo libero, tincidunt vestibulum justo. Phasellus imperdiet ante vitae urna euismod finibus. Morbi varius diam eget hendrerit dapibus. Curabitur sollicitudin, massa nec congue euismod, felis mi blandit purus, iaculis efficitur dui diam vel mi. Nunc et leo porta, ullamcorper quam sed, hendrerit velit. Aliquam quis nisi vitae quam lacinia ultrices in sed tortor. Integer a viverra arcu. Aenean ultrices, orci at dictum convallis, quam libero accumsan arcu, a vestibulum mauris arcu sit amet odio. Pellentesque consequat ac mauris nec bibendum. Nulla lectus nibh, placerat quis elit eget, mollis laoreet ante.
</p>
<p>
Nam molestie nulla eget feugiat malesuada. Nullam eleifend rhoncus faucibus. Nulla blandit, enim sed lobortis vestibulum, tellus nunc sagittis massa, sed molestie orci purus nec arcu. Nam ut est vitae turpis aliquam porta eget ut mi. Mauris a dui ut felis hendrerit scelerisque nec nec nisi. Suspendisse nec bibendum dolor, in varius libero. Mauris pharetra est id porttitor ornare. Cras vitae ipsum convallis, blandit neque bibendum, laoreet nisi.
</p>
<p>
Aliquam sagittis nulla justo, et fermentum lorem tempor ut. Proin neque justo, gravida eget consequat sed, varius vestibulum odio. Vivamus ullamcorper urna non diam consectetur, sit amet porttitor massa posuere. Phasellus et lacus nulla. Duis malesuada eros ut vestibulum mattis. Ut a dolor sed urna feugiat tempor. Curabitur ut dictum quam, quis porta neque. Morbi euismod nulla sed diam accumsan, nec sollicitudin urna hendrerit. Integer pellentesque mauris neque, sit amet iaculis ipsum placerat ut. Mauris ullamcorper nisl ac lorem condimentum laoreet. Donec quis massa mauris. Nullam sed gravida augue.
</p>
<p>
Nullam pharetra libero id porta lacinia. Morbi imperdiet purus non lorem faucibus eleifend. Phasellus massa erat, volutpat non leo ac, sagittis sollicitudin ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi lorem, tincidunt et arcu non, tempor convallis quam. Vestibulum rhoncus justo id tortor sagittis, in scelerisque purus cursus. In lobortis aliquet enim, in viverra neque aliquam nec. Ut dolor tortor, rutrum eu scelerisque in, tincidunt sit amet diam. Praesent vestibulum rutrum ligula, eget suscipit felis mollis sed. Nulla lectus tortor, eleifend nec nibh sagittis, placerat tristique neque. Pellentesque vitae pellentesque felis, et consequat orci. Cras sed vestibulum augue, eleifend posuere purus. Fusce sagittis semper ante, a finibus nibh elementum id.
</p>
<p>
Etiam non dui nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis arcu in nulla porttitor tempus. Nullam scelerisque vestibulum risus. Sed a eleifend eros, et vestibulum nisi. Nullam massa arcu, euismod et dolor tincidunt, maximus condimentum orci. Mauris dolor felis, cursus eu mollis vitae, sagittis sed tellus. Maecenas tellus est, porttitor quis arcu a, scelerisque dignissim magna. Curabitur facilisis lectus nisl, vitae ultrices augue fringilla ac. Vestibulum fringilla, lectus non pulvinar ultrices, nisi nunc condimentum massa, sed sollicitudin est neque sed enim. Sed aliquam gravida scelerisque. Sed suscipit, turpis eu faucibus blandit, magna lorem suscipit ante, et vestibulum diam mi in dolor. Integer et magna eu massa convallis euismod. Sed a elit eget lacus ultricies condimentum. Quisque non mauris ornare, euismod ante vel, pretium quam. Ut sed convallis erat.
</p></div>
<div id="trigger_1">
  <p>This is it! Do something!</p>
</div>
    <div id="lipsum">
<h1>Just more text to make the page long</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate sapien id dolor porttitor, in egestas magna scelerisque. Morbi eget sapien consequat leo placerat varius eu eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor mollis purus, nec vulputate mauris tempus ac. Donec accumsan sit amet magna in pharetra. Nam porttitor dictum mauris, et vulputate mi hendrerit at. Vivamus a mauris vulputate, egestas leo sit amet, tempor felis. Duis quis felis velit.
</p>
<p>
Praesent in hendrerit nunc. Maecenas vel libero dapibus, fermentum dolor vitae, pretium ex. Aliquam sollicitudin augue lorem, sit amet posuere ligula sodales at. Sed erat augue, convallis at massa in, eleifend dapibus sapien. Proin gravida enim lacinia lacus ornare mattis. Praesent scelerisque neque rhoncus bibendum euismod. Donec eleifend risus sed justo facilisis, a convallis mauris congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a erat cursus, semper augue ac, pellentesque nisi. Sed sed arcu fringilla, imperdiet purus id, ultricies mi.
</p>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque ipsum elit, feugiat sed pellentesque sed, cursus id lorem. Vestibulum tincidunt, nisl faucibus elementum dictum, ligula enim varius massa, eu dapibus lectus augue ac ante. Etiam a enim id nisl facilisis pulvinar non sit amet lectus. Morbi lorem dolor, varius eget enim a, accumsan luctus magna. Suspendisse potenti. Sed tempor metus vel velit luctus, non placerat ipsum tempus. Curabitur nec mauris eget dui ultrices elementum id vel dolor. Duis sodales convallis maximus. Fusce efficitur commodo magna, nec lobortis lacus tincidunt et. Vivamus tempor dolor sit amet magna sollicitudin, et luctus libero tincidunt. Quisque eu nisi non mauris tincidunt molestie nec nec nunc.
</p>
<p>
Fusce eu magna dictum, ullamcorper magna a, elementum massa. Praesent fringilla, sapien at scelerisque tincidunt, nisi augue accumsan libero, tristique egestas erat dolor vel dolor. Integer ut scelerisque leo, sit amet tincidunt diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tristique arcu eros, sed hendrerit urna accumsan sit amet. Duis ac efficitur nulla. Proin augue est, viverra et elit quis, consequat tempus mauris. Ut turpis purus, sagittis eget hendrerit ac, condimentum vitae ligula.
</p>
<p>
Praesent commodo tincidunt magna, eget mollis purus ultricies eu. Maecenas feugiat in nunc ac rhoncus. Vestibulum neque est, dapibus porttitor tristique vitae, tempor et turpis. Sed maximus aliquam tincidunt. Maecenas imperdiet tempor feugiat. Praesent luctus iaculis massa, at faucibus enim hendrerit et. Quisque rutrum, ipsum ut aliquam tincidunt, ipsum enim semper metus, a auctor erat erat et ligula. Fusce mollis, lectus sit amet gravida venenatis, tellus neque lacinia lorem, a ornare leo orci non tortor. Mauris non ligula tempor, gravida turpis at, efficitur erat. Donec nec pharetra lectus, eu dictum dolor. Donec vitae lacus ligula.
</p>
<p>
Sed in tempus urna. Nulla enim mi, mattis vel libero vitae, commodo convallis dui. Integer dictum magna sit amet tempor consequat. Morbi bibendum scelerisque gravida. Suspendisse fringilla nibh id quam aliquam, vel molestie nisi pellentesque. Aliquam erat volutpat. Sed sit amet commodo libero, tincidunt vestibulum justo. Phasellus imperdiet ante vitae urna euismod finibus. Morbi varius diam eget hendrerit dapibus. Curabitur sollicitudin, massa nec congue euismod, felis mi blandit purus, iaculis efficitur dui diam vel mi. Nunc et leo porta, ullamcorper quam sed, hendrerit velit. Aliquam quis nisi vitae quam lacinia ultrices in sed tortor. Integer a viverra arcu. Aenean ultrices, orci at dictum convallis, quam libero accumsan arcu, a vestibulum mauris arcu sit amet odio. Pellentesque consequat ac mauris nec bibendum. Nulla lectus nibh, placerat quis elit eget, mollis laoreet ante.
</p>
<p>
Nam molestie nulla eget feugiat malesuada. Nullam eleifend rhoncus faucibus. Nulla blandit, enim sed lobortis vestibulum, tellus nunc sagittis massa, sed molestie orci purus nec arcu. Nam ut est vitae turpis aliquam porta eget ut mi. Mauris a dui ut felis hendrerit scelerisque nec nec nisi. Suspendisse nec bibendum dolor, in varius libero. Mauris pharetra est id porttitor ornare. Cras vitae ipsum convallis, blandit neque bibendum, laoreet nisi.
</p>
<p>
Aliquam sagittis nulla justo, et fermentum lorem tempor ut. Proin neque justo, gravida eget consequat sed, varius vestibulum odio. Vivamus ullamcorper urna non diam consectetur, sit amet porttitor massa posuere. Phasellus et lacus nulla. Duis malesuada eros ut vestibulum mattis. Ut a dolor sed urna feugiat tempor. Curabitur ut dictum quam, quis porta neque. Morbi euismod nulla sed diam accumsan, nec sollicitudin urna hendrerit. Integer pellentesque mauris neque, sit amet iaculis ipsum placerat ut. Mauris ullamcorper nisl ac lorem condimentum laoreet. Donec quis massa mauris. Nullam sed gravida augue.
</p>
<p>
Nullam pharetra libero id porta lacinia. Morbi imperdiet purus non lorem faucibus eleifend. Phasellus massa erat, volutpat non leo ac, sagittis sollicitudin ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi lorem, tincidunt et arcu non, tempor convallis quam. Vestibulum rhoncus justo id tortor sagittis, in scelerisque purus cursus. In lobortis aliquet enim, in viverra neque aliquam nec. Ut dolor tortor, rutrum eu scelerisque in, tincidunt sit amet diam. Praesent vestibulum rutrum ligula, eget suscipit felis mollis sed. Nulla lectus tortor, eleifend nec nibh sagittis, placerat tristique neque. Pellentesque vitae pellentesque felis, et consequat orci. Cras sed vestibulum augue, eleifend posuere purus. Fusce sagittis semper ante, a finibus nibh elementum id.
</p>
<p>
Etiam non dui nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis arcu in nulla porttitor tempus. Nullam scelerisque vestibulum risus. Sed a eleifend eros, et vestibulum nisi. Nullam massa arcu, euismod et dolor tincidunt, maximus condimentum orci. Mauris dolor felis, cursus eu mollis vitae, sagittis sed tellus. Maecenas tellus est, porttitor quis arcu a, scelerisque dignissim magna. Curabitur facilisis lectus nisl, vitae ultrices augue fringilla ac. Vestibulum fringilla, lectus non pulvinar ultrices, nisi nunc condimentum massa, sed sollicitudin est neque sed enim. Sed aliquam gravida scelerisque. Sed suscipit, turpis eu faucibus blandit, magna lorem suscipit ante, et vestibulum diam mi in dolor. Integer et magna eu massa convallis euismod. Sed a elit eget lacus ultricies condimentum. Quisque non mauris ornare, euismod ante vel, pretium quam. Ut sed convallis erat.
</p></div>
</div>
              
            
!

CSS

              
                #doc{
  width: 1020px;
  margin: 0 auto;
}

#trigger_1{
 background: teal;
  padding: 1em;
  box-sizing: border-box;
}
              
            
!

JS

              
                var elementTop = document.querySelector("#trigger_1").offsetTop;
var triggerOffset = 100; 
var triggered = false;
window.onscroll = function() {
  triggerPos = elementTop - window.innerHeight + triggerOffset;
  if( ( document.body.scrollTop > triggerPos || document.documentElement.scrollTop > triggerPos ) && !triggered ){
    triggered = true;
    TweenMax.to('#trigger_1', 1, {y:-200, autoAlpha: 0});
  }
};
              
            
!
999px

Console