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 class="page">
  <div class="page-center">
    
    <!-- Header -->
    <div class="header">
      <p>Header</p>
    </div>
    
    <!-- Other Sections -->
    <div class="other start">
      <p>Other Sections - To test scroll start</p>
    </div>        
    
    <!-- Post -->
    <div id="container" class="post">
      
      <!-- Progress Bar within "Post" Container -->
      <div id="progress-wrapper" class="progress-wrapper">
        <div id="progress-bar" class="progress-bar"></div>
      </div>
      
      <div class="post-content">
        <h1>Post Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet odio at vulputate lobortis. Sed in lacinia nisl. Vestibulum sit amet facilisis magna. Sed nec ex dapibus turpis egestas scelerisque eu ac tellus. Sed at mauris dolor. Proin sollicitudin, tortor at finibus egestas, nulla augue faucibus libero, at tristique leo quam in orci. Donec non sollicitudin orci. Duis nec libero at ipsum vestibulum tristique vel euismod ex. Proin laoreet sem non elit scelerisque, vitae condimentum ipsum tempus. Integer purus eros, volutpat sit amet risus sollicitudin, condimentum consequat purus. Phasellus molestie ipsum tellus, a iaculis orci semper a. Vestibulum tempus felis ac sollicitudin ullamcorper. Aenean vel purus facilisis, scelerisque metus at, mollis metus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel odio magna. Nullam a sapien vestibulum, iaculis lectus sed, consectetur lacus. Pellentesque neque odio, auctor ut auctor at, euismod quis sem. Nunc vel augue vel orci aliquet interdum eget vitae enim. Vivamus nunc arcu, varius in mattis eget, vulputate eget libero. In metus tellus, tincidunt eget lorem eget, convallis auctor elit. Aliquam enim sem, iaculis sit amet nisl sit amet, semper tempus lectus. Mauris sollicitudin, mauris ac vestibulum tempus, justo libero blandit nulla, in varius velit metus eget purus. Pellentesque a massa at dolor accumsan commodo. Phasellus auctor, mi in luctus bibendum, nulla risus mattis dui, eget facilisis risus ante nec orci.</p>
        <p>Sed ultrices neque at quam imperdiet scelerisque non vitae dolor. Integer imperdiet rutrum turpis accumsan egestas. In ut tortor eget libero venenatis fermentum quis sit amet mauris. Curabitur dapibus libero elit. In ut nisi pulvinar odio malesuada porta non vitae tellus. Vestibulum commodo hendrerit lacus. Aenean interdum arcu ac nibh vehicula mattis.</p>
        <div class="img">Image</div>
        <p>Etiam quis iaculis odio, eu fermentum felis. Vestibulum finibus nibh urna, et scelerisque sapien blandit quis. In ex felis, semper id velit ut, convallis auctor leo. Duis sed malesuada dui. Integer tristique ultricies elementum. Nam lacinia viverra quam et eleifend. Phasellus ultrices sollicitudin purus non sagittis. Aliquam lacinia vulputate turpis eget ultrices. Ut varius finibus turpis ut pellentesque. Nam malesuada viverra ante, et aliquet diam efficitur suscipit.</p>
        <p>Mauris volutpat diam non purus congue, et eleifend ante porta. Phasellus viverra erat sed hendrerit fringilla. In hac habitasse platea dictumst. Vivamus ac ligula egestas nisi convallis venenatis id quis magna. Nam dapibus, arcu quis pharetra placerat, nisi dui vehicula leo, ac interdum risus augue id magna. Suspendisse potenti. Nullam maximus tincidunt dolor, non fringilla erat scelerisque interdum. Nulla dapibus, tellus at efficitur rhoncus, ligula odio luctus libero, at tempor nisl dolor nec leo. Nunc ac libero facilisis, pulvinar nisl non, dignissim mi.</p>    
        <p>Sed ultrices neque at quam imperdiet scelerisque non vitae dolor. Integer imperdiet rutrum turpis accumsan egestas. In ut tortor eget libero venenatis fermentum quis sit amet mauris. Curabitur dapibus libero elit. In ut nisi pulvinar odio malesuada porta non vitae tellus. Vestibulum commodo hendrerit lacus. Aenean interdum arcu ac nibh vehicula mattis.</p>
        <p>Etiam quis iaculis odio, eu fermentum felis. Vestibulum finibus nibh urna, et scelerisque sapien blandit quis. In ex felis, semper id velit ut, convallis auctor leo. Duis sed malesuada dui. Integer tristique ultricies elementum. Nam lacinia viverra quam et eleifend. Phasellus ultrices sollicitudin purus non sagittis. Aliquam lacinia vulputate turpis eget ultrices. Ut varius finibus turpis ut pellentesque. Nam malesuada viverra ante, et aliquet diam efficitur suscipit.</p>
        <p>Mauris volutpat diam non purus congue, et eleifend ante porta. Phasellus viverra erat sed hendrerit fringilla. In hac habitasse platea dictumst. Vivamus ac ligula egestas nisi convallis venenatis id quis magna. Nam dapibus, arcu quis pharetra placerat, nisi dui vehicula leo, ac interdum risus augue id magna. Suspendisse potenti. Nullam maximus tincidunt dolor, non fringilla erat scelerisque interdum. Nulla dapibus, tellus at efficitur rhoncus, ligula odio luctus libero, at tempor nisl dolor nec leo. Nunc ac libero facilisis, pulvinar nisl non, dignissim mi.</p>
        <div class="img">Image</div>
        <p>Sed ultrices neque at quam imperdiet scelerisque non vitae dolor. Integer imperdiet rutrum turpis accumsan egestas. In ut tortor eget libero venenatis fermentum quis sit amet mauris. Curabitur dapibus libero elit. In ut nisi pulvinar odio malesuada porta non vitae tellus. Vestibulum commodo hendrerit lacus. Aenean interdum arcu ac nibh vehicula mattis.</p>
        <p>Etiam quis iaculis odio, eu fermentum felis. Vestibulum finibus nibh urna, et scelerisque sapien blandit quis. In ex felis, semper id velit ut, convallis auctor leo. Duis sed malesuada dui. Integer tristique ultricies elementum. Nam lacinia viverra quam et eleifend. Phasellus ultrices sollicitudin purus non sagittis. Aliquam lacinia vulputate turpis eget ultrices. Ut varius finibus turpis ut pellentesque. Nam malesuada viverra ante, et aliquet diam efficitur suscipit.</p>
        <p>Mauris volutpat diam non purus congue, et eleifend ante porta. Phasellus viverra erat sed hendrerit fringilla. In hac habitasse platea dictumst. Vivamus ac ligula egestas nisi convallis venenatis id quis magna. Nam dapibus, arcu quis pharetra placerat, nisi dui vehicula leo, ac interdum risus augue id magna. Suspendisse potenti. Nullam maximus tincidunt dolor, non fringilla erat scelerisque interdum. Nulla dapibus, tellus at efficitur rhoncus, ligula odio luctus libero, at tempor nisl dolor nec leo. Nunc ac libero facilisis, pulvinar nisl non, dignissim mi.</p> 
        <p>Sed ultrices neque at quam imperdiet scelerisque non vitae dolor. Integer imperdiet rutrum turpis accumsan egestas. In ut tortor eget libero venenatis fermentum quis sit amet mauris. Curabitur dapibus libero elit. In ut nisi pulvinar odio malesuada porta non vitae tellus. Vestibulum commodo hendrerit lacus. Aenean interdum arcu ac nibh vehicula mattis.</p>
        <div class="img">Image</div>
        <p>Etiam quis iaculis odio, eu fermentum felis. Vestibulum finibus nibh urna, et scelerisque sapien blandit quis. In ex felis, semper id velit ut, convallis auctor leo. Duis sed malesuada dui. Integer tristique ultricies elementum. Nam lacinia viverra quam et eleifend. Phasellus ultrices sollicitudin purus non sagittis. Aliquam lacinia vulputate turpis eget ultrices. Ut varius finibus turpis ut pellentesque. Nam malesuada viverra ante, et aliquet diam efficitur suscipit.</p>
        <p>Mauris volutpat diam non purus congue, et eleifend ante porta. Phasellus viverra erat sed hendrerit fringilla. In hac habitasse platea dictumst. Vivamus ac ligula egestas nisi convallis venenatis id quis magna. Nam dapibus, arcu quis pharetra placerat, nisi dui vehicula leo, ac interdum risus augue id magna. Suspendisse potenti. Nullam maximus tincidunt dolor, non fringilla erat scelerisque interdum. Nulla dapibus, tellus at efficitur rhoncus, ligula odio luctus libero, at tempor nisl dolor nec leo. Nunc ac libero facilisis, pulvinar nisl non, dignissim mi.</p> 
      </div>
    </div>
    
    <!-- Other Sections -->
    <div class="other bottom">
      <p>Other Sections - To test scroll end</p>
    </div>    
    
    <!-- Footer -->
    <div class="footer">
      <p>Footer</p>
    </div>
    
  </div>
</div>
              
            
!

CSS

              
                /* Imports */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

/* Global Resets */
body { 
  margin: 0; 
  font-family: 'Noto Sans', sans-serif;
}
*, *:before, *:after { box-sizing: border-box; }

/* General Styling */
body { background-color: #faf8f5; }
.page-center {
  float: none;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;  
}
.header, .footer {
  background-color: #b5dfc0;
  padding: 16px;
  margin: 24px 0;
}
.other {
  background-color: #fcc159;
  padding: 16px;
  margin: 24px 0;
}
.other.top { height: 250px; }
.other.bottom { height: 750px; }
.post { background-color: #ffffff; }
.post-content { padding: 24px; }
.img {
  width: 100%;
  height: 350px;
  background-color: #eeeeee;
}

/* Progress Bar Styling */
.progress-wrapper {
  width: 100%;
  height: 5px; /* Bar height */
  background-color: #f9f9f7 ; /* Bar background colour */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.progress-bar {
  width: 0;
  height: 5px; /* Bar height */
  background-color: #fc8c7a; /* Bar progress colour */
}
              
            
!

JS

              
                /* Declare your variables: the progress bar and the post container */
const progressWrapper = document.getElementById("progress-wrapper"),
      progressBar = document.getElementById("progress-bar"),
      container = document.getElementById("container"),
      body = document.body;

/* Math stuff */
function setProgress() {
  /* start will be 0 when the scroll reaches the container start and end will be 0 when the scroll reaches the container end */
  let start = container.getBoundingClientRect().top,
      end = container.getBoundingClientRect().bottom,
      height = container.getBoundingClientRect().height;
  
  /* Testing numbers in the console */
  console.log("Start: " + start + " | End: " + end + " | Height: " + height);
  
  /* The progress bar's width should be 0 at start and 100% at end */
  if (start > 0) {
    let width = 0;
    progressBar.style.width = width;
  } else {
    let width = Math.abs(start) / height * 100 + "%";
    progressBar.style.width = width;
  }
 
}

/* Trigger the function on scroll */
window.addEventListener('scroll', setProgress);
              
            
!
999px

Console