JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="prog_contain"><div class="prog" id="prog"></div></div>

<div class="fix">

<p id="count">0%</p>

</div>

<div class="fix2" id="thing">

Look at Me!

</div>

<div class="header" id="head"></div>


<div class="page" id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien dolor. Etiam a magna vel est accumsan fermentum et sollicitudin dui. Etiam sed maximus tortor, quis cursus tellus. Aliquam facilisis ullamcorper tellus efficitur consectetur. Donec convallis bibendum odio, vitae vehicula libero posuere in. Donec auctor metus vel interdum pellentesque. Vestibulum tempus lacus id velit consequat aliquet. Quisque at semper felis. Nunc mollis, risus eget suscipit efficitur, nisl nisl pretium ligula, in luctus ipsum ipsum eu enim. Suspendisse auctor hendrerit sodales. Ut turpis tellus, rutrum quis mi a, dapibus tempor lorem. Mauris et malesuada arcu.</p>

<p>Sed ac volutpat ipsum. Ut egestas, est vitae interdum porttitor, nulla dolor vehicula felis, ut laoreet magna arcu id nulla. Nulla aliquet rutrum vehicula. Duis venenatis tortor ac felis venenatis condimentum. Nunc sollicitudin nibh turpis, ac pulvinar arcu venenatis vel. Suspendisse lobortis nunc vitae velit convallis, quis porttitor elit placerat. Morbi auctor libero varius erat volutpat, ut dapibus mauris feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Etiam a ipsum hendrerit, molestie leo id, porttitor eros. Suspendisse arcu libero, laoreet at faucibus eu, venenatis quis nunc. Nulla dictum erat sed rhoncus vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam mattis sagittis porttitor. Maecenas in nunc at odio dignissim pellentesque id eu justo. Suspendisse ut nunc sed augue hendrerit vulputate. Donec suscipit nisl id pretium efficitur. In sed imperdiet odio, at convallis orci. Quisque elementum porttitor condimentum. Ut blandit efficitur augue, eget fermentum...

CSS

html, body {
margin:0;font-family:arial;
}

.fix {
  position: fixed;top:50px;left:50px;
}
.fix2 {
  position: fixed;top:0%;left:10px;
}

.page {max-width:600px;margin:auto;}

.prog_contain {position:fixed;width:100%;top:0;}
.prog {height:5px;background-color:red;width:0;}

#count {font-size:24px;margin:0;}

.header {height:200px;}

.footer {height:900px;}

JavaScript

var counter = document.getElementById('count');
var thing = document.getElementById('thing');
var prog = document.getElementById('prog');


function updateCounter() {
  'use strict';
  
    var top = (document.documentElement && document.documentElement.scrollTop) || 
              document.body.scrollTop;

  

  
  
var height = document.documentElement.scrollHeight - window.innerHeight;
  
  counter.textContent = Math.round(0 + top / height * 100) + "%";  
  prog.style.width = (0 + top / height * 100) + "%";
  thing.style.top = (0 + top / height * 100) + "%";
  
  
}

document.addEventListener('scroll', updateCounter);
window.addEventListener('resize', updateCounter);