css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
  <div id="demo-bar"></div>
  <div class="container">
    <a href="http://webdesigncrowd.com" class="btn"><span class="title">WebDesignCrowd</span></a>
    <a href="http://www.webdesigncrowd.com/sliding-icon-button/" class="btn"><span class="title">Back to Article</span></a>
    <h1>Scrolling Progress Bar</h1>

    <div class="content">
      <div id="intro">
        <h2>Introduction</h2>
        <p>Nullam condimentum leo in nunc feugiat gravida. Nunc sed tellus et eros mattis auctor. Nam luctus commodo metus, pretium commodo nisl congue et. Sed vel ipsum eget ligula aliquam fringilla quis vel quam. Sed pulvinar libero id egestas rutrum. Ut quis metus ut lacus cursus commodo. Nam in pharetra leo. Donec augue enim, aliquam eget est quis, imperdiet aliquet mauris. Ut id augue vel tortor aliquam feugiat. </p>
        <p>Nullam facilisis, urna nec hendrerit tempus, tellus tortor molestie libero, ac malesuada dui odio condimentum tellus. Curabitur posuere id ipsum eget convallis. Suspendisse accumsan magna id pharetra sodales. Cras sit amet mi non turpis auctor dapibus eu in justo. Aliquam erat ipsum, dictum et elementum quis, dictum et diam. Mauris elementum eleifend nulla, in consectetur quam tristique a. Donec consequat elit in dolor semper, et aliquam mauris euismod.</p>
        <p>Aliquam id tellus purus. Fusce fermentum interdum mauris a lobortis. Donec vehicula at nulla vel sagittis. Maecenas commodo dapibus ipsum, tincidunt bibendum magna. Maecenas libero odio, dapibus a tortor blandit, vestibulum porta felis. Donec quis massa eu elit semper rutrum. Sed mattis nisl sed elit placerat, id aliquet magna sodales. Donec a malesuada sem. Praesent accumsan cursus viverra. Morbi dapibus lacinia bibendum. Duis ut egestas dui.</p>
        <p>Integer id tellus dictum, ullamcorper lacus iaculis, interdum quam. Pellentesque fringilla cursus adipiscing. Morbi fermentum volutpat gravida. Cras quis commodo neque, ac tempus nisi. Curabitur facilisis leo at ligula sagittis, in pharetra sem molestie. Nulla sagittis libero ut tortor sollicitudin, nec mollis augue gravida. Nulla diam felis, sodales et ipsum et, commodo suscipit nunc. Aenean accumsan leo eros, tristique elementum arcu pellentesque sed. In sed tempor neque. Phasellus vulputate, est at adipiscing rhoncus, turpis magna ultricies nisi, nec lacinia nisi nulla quis ipsum. Nullam auctor turpis vel risus ultrices, quis luctus nisi bibendum. In accumsan, nibh sit amet ultrices mattis, justo neque luctus sapien, porttitor ornare turpis tortor vel sem. Nulla et sapien ut est hendrerit volutpat at non tortor. Praesent faucibus sit amet sapien et pharetra.</p>
      </div>
      <div id="part-1">
        <h2>Part 1: Do this thing!</h2>
        <p>Nullam condimentum leo in nunc feugiat gravida. Nunc sed tellus et eros mattis auctor. Nam luctus commodo metus, pretium commodo nisl congue et. Sed vel ipsum eget ligula aliquam fringilla quis vel quam. Sed pulvinar libero id egestas rutrum. Ut quis metus ut lacus cursus commodo. Nam in pharetra leo. Donec augue enim, aliquam eget est quis, imperdiet aliquet mauris. Ut id augue vel tortor aliquam feugiat. </p>
        <p>Nullam facilisis, urna nec hendrerit tempus, tellus tortor molestie libero, ac malesuada dui odio condimentum tellus. Curabitur posuere id ipsum eget convallis. Suspendisse accumsan magna id pharetra sodales. Cras sit amet mi non turpis auctor dapibus eu in justo. Aliquam erat ipsum, dictum et elementum quis, dictum et diam. Mauris elementum eleifend nulla, in consectetur quam tristique a. Donec consequat elit in dolor semper, et aliquam mauris euismod.</p>
        <p>Aliquam id tellus purus. Fusce fermentum interdum mauris a lobortis. Donec vehicula at nulla vel sagittis. Maecenas commodo dapibus ipsum, tincidunt bibendum magna. Maecenas libero odio, dapibus a tortor blandit, vestibulum porta felis. Donec quis massa eu elit semper rutrum. Sed mattis nisl sed elit placerat, id aliquet magna sodales. Donec a malesuada sem. Praesent accumsan cursus viverra. Morbi dapibus lacinia bibendum. Duis ut egestas dui.</p>
      </div>

      <div id="part-2">
        <h2>Part 2: Do that other thing!</h2>
        <p>Integer id tellus dictum, ullamcorper lacus iaculis, interdum quam. Pellentesque fringilla cursus adipiscing. Morbi fermentum volutpat gravida. Cras quis commodo neque, ac tempus nisi. Curabitur facilisis leo at ligula sagittis, in pharetra sem molestie. Nulla sagittis libero ut tortor sollicitudin, nec mollis augue gravida. Nulla diam felis, sodales et ipsum et, commodo suscipit nunc. Aenean accumsan leo eros, tristique elementum arcu pellentesque sed. In sed tempor neque. Phasellus vulputate, est at adipiscing rhoncus, turpis magna ultricies nisi, nec lacinia nisi nulla quis ipsum. Nullam auctor turpis vel risus ultrices, quis luctus nisi bibendum. In accumsan, nibh sit amet ultrices mattis, justo neque luctus sapien, porttitor ornare turpis tortor vel sem. Nulla et sapien ut est hendrerit volutpat at non tortor. Praesent faucibus sit amet sapien et pharetra.</p>
      </div>
      
    </div>
    <div class="progress">
      <div class="wrapper">
        <div class="bar">
          <a href="#intro">Introduction</a>
          <i class="icon-ok"></i>
          <span></span>
        </div>
        <div class="bar">
          <a href="#part-1">Part 1: Do this thing!</a>
          <i class="icon-ok"></i>
          <span></span>
        </div>
        <div class="bar">
          <a href="#part-2">Part 2: Do that other thing!</a>
          <i class="icon-ok"></i>
          <span></span>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>


</body>
            
          
!
            
              /* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS RESET DONE */


body {
  color: #fff;
  margin: 0 auto;
  font: 1em/1.3em Montserrat, Helvetica, sans-serif;
}
.clearfix {
  clear: both;
}
.container {
  width: 80%;
  height: 100%;
  padding: 20px 10%;
  text-align: center;
  background-color: #36a7f3;
}
h1 {
  margin: 40px 0;
  font-size: 40px;
  line-height: 40px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #888;
  -webkit-font-smoothing: antialiased;
}
h2 {
  font-size: 28px;
  color: #fff;
  font-weight: normal;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: 1px 1px 0 #1e88ce;
}
a {
  text-align: left;
  text-decoration: none;
  color: #fff;  
  margin: 0 10px;
}

p {
  line-height: 32px;
  padding: 0 0 40px 0;
  text-align: left;
}

/* Button styles */
.btn {
  box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
  
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 50px;
  
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
    
  line-height: 50px;
  padding: 0 30px;  
  font-size: 14px;
  font-weight: bold;

  -webkit-box-shadow: 0 3px 0 0 #1275b7;
  box-shadow: 0 3px 0 0 #1275b7;
  background-color: #1e88ce;
}
  
  .btn:active,
  .btn.active {
    top: 2px;
    -webkit-box-shadow: 0 1px 0 0 #1275b7;
    box-shadow: 0 1px 0 0 #1275b7;
  }


/* Progress Bar */

.content {
  width: 60%;
  float: left;
  margin: 45px 0;
  padding: 0 3% 0 0;
  border-right: 1px solid rgba(255,255,255,.4);
}

.progress {
  position: relative;
  float: left;
  text-align: left;
  width: 330px;
  padding: 45px 0 0 2%;
}
  .progress .wrapper {
    position: absolute;
    width: inherit;
  }
    .progress .wrapper.affix {
      position: fixed;
      top: 10px;

    }
  .progress .bar {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    background-color: #1c92db;
  }
  .progress .bar span {
    position: absolute;
    display: block;
    top: 0;
    width: 0;
    height: 40px;
    z-index: 0;
    background-color: #1275b7;
  }
  .progress .bar a {
    line-height: 40px;
    position: relative;
    z-index: 1;
  }
  .progress .bar i {
    position: absolute;
    right: -30px;
    height: 40px;
    line-height: 40px;
    color: #36a7f3;

    -webkit-transition: color .3s;
    transition: color .3s;
  }

.footer {
  height: 470px;
  font-size: 28px;
  text-align: center;
  line-height: 470px;
  background-color: #444;
}


  

            
          
!
            
              (function($){
	$(function(){
	  

	  var wrapper_top = $(".progress .wrapper").offset().top;
	  $(window).scroll(function (){
	  	var wrapper_height = $(".progress .wrapper").height();

	  	// Affixes Progress Bars
		  var top = $(this).scrollTop();
	  	if (top > wrapper_top - 10) {
	  		$(".progress .wrapper").addClass("affix");
	  	}
	  	else {
				$(".progress .wrapper").removeClass("affix");
	  	}


	  	// Calculate each progress section
	  	$(".content div").each(function(i){
	  		var this_top = $(this).offset().top;
	  		var height = $(this).height();
	  		var this_bottom = this_top + height;
	  		var percent = 0;

	  		// Scrolled within current section
	  		if (top >= this_top && top <= this_bottom) {
	  			percent = ((top - this_top) / (height - wrapper_height)) * 100;
	  			if (percent >= 100) { 
	  				percent = 100; 
		  			$(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");
	  			}
	  			else {
	  				$(".progress .wrapper .bar:eq("+i+") i").css("color", "#36a7f3");	  				  				
	  			}
	  		}
	  		else if (top > this_bottom) {
	  			percent = 100;
	  			$(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");
	  		}
	  		console.log(i);
  			$(".progress .wrapper .bar:eq("+i+") span").css("width", percent + "%");
	  	});
	  });
	

	  // Smooth Scroll Links
	  $(".wrapper .bar a").click(function (e){
	  	e.preventDefault();

	  	var hash = this.hash.substr(1);
	  	console.log(hash);
	  	$('html, body').animate({
        scrollTop: $("#"+ hash).offset().top - 10
    }, 500);

	  });

	}); // end of document ready
})(jQuery); // end of jQuery name space
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console