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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <main>
  <header>
	<h1>Scroll Indicator</h1>
</header>
  
<h2>Bạn hãy kéo xuống để thấy kết quả nhé</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta arcu sed tellus molestie, at consequat massa tristique. Aenean vulputate erat in ipsum cursus venenatis. In in arcu interdum metus vehicula pharetra. In tristique ipsum in tellus dictum sollicitudin. Pellentesque id semper mi, a finibus eros. Ut hendrerit dictum varius. Nulla facilisi. Donec id turpis tincidunt, semper augue quis, gravida odio. Sed convallis ante vestibulum lobortis rhoncus. Suspendisse potenti. Praesent maximus sapien quis massa mattis, at iaculis neque finibus. Proin pretium blandit dignissim. Aliquam magna mauris, congue vitae eros in, efficitur lobortis mi. Ut porta porta aliquet.</p>
	<p>Quisque sit amet ultricies libero, non eleifend nisi. Proin id sem volutpat, pulvinar neque a, tempus tellus. Aliquam tincidunt libero a dolor posuere dictum. In mattis, nibh eu eleifend gravida, justo elit hendrerit lorem, vitae varius est risus a turpis. Sed vel porttitor velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur varius ullamcorper gravida. Maecenas tempus id metus ac consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Donec neque arcu, tincidunt id nisl sed, luctus pulvinar lectus. Pellentesque ornare interdum justo, sed pretium purus lacinia et. Duis pellentesque et massa in finibus. Sed vehicula nec velit quis rutrum. Vivamus eu lobortis justo, sed hendrerit dolor. Nam vitae tellus vel eros semper malesuada. Cras vel neque dictum, accumsan sapien non, laoreet lacus. Vestibulum et fringilla purus. Pellentesque malesuada arcu sed eros iaculis, ac ultricies metus sodales. Vivamus gravida nulla id dictum fermentum. Etiam iaculis ante quis arcu dapibus ultrices. Nulla venenatis efficitur enim nec dictum. In blandit velit at est ullamcorper, in porta mi molestie. Morbi tincidunt ligula eu leo maximus bibendum. Nam ligula nisl, rutrum quis vulputate placerat, consequat non magna.</p>
	<p>Nullam nunc velit, aliquet a turpis eu, feugiat dapibus lorem. Proin eget egestas enim, ac malesuada risus. Phasellus vel placerat elit, vitae dictum libero. Mauris vel interdum tellus, gravida posuere nunc. In in odio dui. Sed sit amet ultrices leo. Integer auctor ornare elit vitae pellentesque. Integer et mattis massa. Aenean sed massa tincidunt, efficitur nunc eget, tempor magna. Quisque luctus elit lectus, sed scelerisque neque ultrices at. Nunc vel nulla eu libero dignissim accumsan. Nunc eu vestibulum metus. Etiam ac est nec libero eleifend commodo vel ac tellus. Proin malesuada purus sed ante interdum, laoreet pretium mauris ornare.</p>
  <p>Mauris porttitor posuere justo vitae ultricies. Sed in pretium urna. Cras orci nulla, bibendum vel nisl non, convallis mattis nisl. Curabitur lorem odio, vulputate ac mollis eget, vulputate vitae neque. Nullam interdum at lacus at sodales. Nulla lobortis elit rhoncus, aliquet ex id, aliquet lorem. Sed ante urna, porta et lobortis nec, aliquet ut nibh. Praesent et tortor at sapien venenatis dapibus non vitae dolor. Phasellus sit amet dignissim justo. Praesent dignissim finibus sem, vitae accumsan felis rhoncus at. Proin molestie vel quam id dapibus. Vestibulum vel ultricies purus, nec blandit mi. Nulla dapibus ex vitae velit venenatis, ac vehicula magna cursus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta arcu sed tellus molestie, at consequat massa tristique. Aenean vulputate erat in ipsum cursus venenatis. In in arcu interdum metus vehicula pharetra. In tristique ipsum in tellus dictum sollicitudin. Pellentesque id semper mi, a finibus eros. Ut hendrerit dictum varius. Nulla facilisi. Donec id turpis tincidunt, semper augue quis, gravida odio. Sed convallis ante vestibulum lobortis rhoncus. Suspendisse potenti. Praesent maximus sapien quis massa mattis, at iaculis neque finibus. Proin pretium blandit dignissim. Aliquam magna mauris, congue vitae eros in, efficitur lobortis mi. Ut porta porta aliquet.</p>
	<p>Quisque sit amet ultricies libero, non eleifend nisi. Proin id sem volutpat, pulvinar neque a, tempus tellus. Aliquam tincidunt libero a dolor posuere dictum. In mattis, nibh eu eleifend gravida, justo elit hendrerit lorem, vitae varius est risus a turpis. Sed vel porttitor velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur varius ullamcorper gravida. Maecenas tempus id metus ac consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Donec neque arcu, tincidunt id nisl sed, luctus pulvinar lectus. Pellentesque ornare interdum justo, sed pretium purus lacinia et. Duis pellentesque et massa in finibus. Sed vehicula nec velit quis rutrum. Vivamus eu lobortis justo, sed hendrerit dolor. Nam vitae tellus vel eros semper malesuada. Cras vel neque dictum, accumsan sapien non, laoreet lacus. Vestibulum et fringilla purus. Pellentesque malesuada arcu sed eros iaculis, ac ultricies metus sodales. Vivamus gravida nulla id dictum fermentum. Etiam iaculis ante quis arcu dapibus ultrices. Nulla venenatis efficitur enim nec dictum. In blandit velit at est ullamcorper, in porta mi molestie. Morbi tincidunt ligula eu leo maximus bibendum. Nam ligula nisl, rutrum quis vulputate placerat, consequat non magna.</p>
  <p>Nullam nunc velit, aliquet a turpis eu, feugiat dapibus lorem. Proin eget egestas enim, ac malesuada risus. Phasellus vel placerat elit, vitae dictum libero. Mauris vel interdum tellus, gravida posuere nunc. In in odio dui. Sed sit amet ultrices leo. Integer auctor ornare elit vitae pellentesque. Integer et mattis massa. Aenean sed massa tincidunt, efficitur nunc eget, tempor magna. Quisque luctus elit lectus, sed scelerisque neque ultrices at. Nunc vel nulla eu libero dignissim accumsan. Nunc eu vestibulum metus. Etiam ac est nec libero eleifend commodo vel ac tellus. Proin malesuada purus sed ante interdum, laoreet pretium mauris ornare.</p>
	<p>Mauris porttitor posuere justo vitae ultricies. Sed in pretium urna. Cras orci nulla, bibendum vel nisl non, convallis mattis nisl. Curabitur lorem odio, vulputate ac mollis eget, vulputate vitae neque. Nullam interdum at lacus at sodales. Nulla lobortis elit rhoncus, aliquet ex id, aliquet lorem. Sed ante urna, porta et lobortis nec, aliquet ut nibh. Praesent et tortor at sapien venenatis dapibus non vitae dolor. Phasellus sit amet dignissim justo. Praesent dignissim finibus sem, vitae accumsan felis rhoncus at. Proin molestie vel quam id dapibus. Vestibulum vel ultricies purus, nec blandit mi. Nulla dapibus ex vitae velit venenatis, ac vehicula magna cursus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta arcu sed tellus molestie, at consequat massa tristique. Aenean vulputate erat in ipsum cursus venenatis. In in arcu interdum metus vehicula pharetra. In tristique ipsum in tellus dictum sollicitudin. Pellentesque id semper mi, a finibus eros. Ut hendrerit dictum varius. Nulla facilisi. Donec id turpis tincidunt, semper augue quis, gravida odio. Sed convallis ante vestibulum lobortis rhoncus. Suspendisse potenti. Praesent maximus sapien quis massa mattis, at iaculis neque finibus. Proin pretium blandit dignissim. Aliquam magna mauris, congue vitae eros in, efficitur lobortis mi. Ut porta porta aliquet.</p>
	<p>Quisque sit amet ultricies libero, non eleifend nisi. Proin id sem volutpat, pulvinar neque a, tempus tellus. Aliquam tincidunt libero a dolor posuere dictum. In mattis, nibh eu eleifend gravida, justo elit hendrerit lorem, vitae varius est risus a turpis. Sed vel porttitor velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur varius ullamcorper gravida. Maecenas tempus id metus ac consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Donec neque arcu, tincidunt id nisl sed, luctus pulvinar lectus. Pellentesque ornare interdum justo, sed pretium purus lacinia et. Duis pellentesque et massa in finibus. Sed vehicula nec velit quis rutrum. Vivamus eu lobortis justo, sed hendrerit dolor. Nam vitae tellus vel eros semper malesuada. Cras vel neque dictum, accumsan sapien non, laoreet lacus. Vestibulum et fringilla purus. Pellentesque malesuada arcu sed eros iaculis, ac ultricies metus sodales. Vivamus gravida nulla id dictum fermentum. Etiam iaculis ante quis arcu dapibus ultrices. Nulla venenatis efficitur enim nec dictum. In blandit velit at est ullamcorper, in porta mi molestie. Morbi tincidunt ligula eu leo maximus bibendum. Nam ligula nisl, rutrum quis vulputate placerat, consequat non magna.</p>
	<p>Nullam nunc velit, aliquet a turpis eu, feugiat dapibus lorem. Proin eget egestas enim, ac malesuada risus. Phasellus vel placerat elit, vitae dictum libero. Mauris vel interdum tellus, gravida posuere nunc. In in odio dui. Sed sit amet ultrices leo. Integer auctor ornare elit vitae pellentesque. Integer et mattis massa. Aenean sed massa tincidunt, efficitur nunc eget, tempor magna. Quisque luctus elit lectus, sed scelerisque neque ultrices at. Nunc vel nulla eu libero dignissim accumsan. Nunc eu vestibulum metus. Etiam ac est nec libero eleifend commodo vel ac tellus. Proin malesuada purus sed ante interdum, laoreet pretium mauris ornare.</p>
	<p>Mauris porttitor posuere justo vitae ultricies. Sed in pretium urna. Cras orci nulla, bibendum vel nisl non, convallis mattis nisl. Curabitur lorem odio, vulputate ac mollis eget, vulputate vitae neque. Nullam interdum at lacus at sodales. Nulla lobortis elit rhoncus, aliquet ex id, aliquet lorem. Sed ante urna, porta et lobortis nec, aliquet ut nibh. Praesent et tortor at sapien venenatis dapibus non vitae dolor. Phasellus sit amet dignissim justo. Praesent dignissim finibus sem, vitae accumsan felis rhoncus at. Proin molestie vel quam id dapibus. Vestibulum vel ultricies purus, nec blandit mi. Nulla dapibus ex vitae velit venenatis, ac vehicula magna cursus.</p>
</main>
              
            
!

CSS

              
                html, body {
   margin: 0;
   padding: 0;
 }
header {
   position: fixed;
   top: 0;
   height: 125px;
   width: 100vw;
   background: #ECF0F1;
 }
 body {
   font-size: 1.25rem;
   background-color:#fafafa;
   background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
   background-size: 100% calc(100% - 100vh + 129px);
   background-repeat: no-repeat;
 }
 body:before {
     content: '';
     position: fixed;
     top: 128px;
     bottom: 0;
     width: 100%;
     z-index: -1;
     background: white;
 }
 main {
   margin-top: 128px;
 }
              
            
!

JS

              
                
              
            
!
999px

Console