JSFiddle - React, Tailwind, and code Playground

HTML

<section class="bar">
  <div id="progressbar"></div>
</section>

<section class="content">
  <h1> Titre 1</h1>
</section>
<section class="content">
  <h1> Titre 2</h1>
</section>
<section class="content">
  <h1> Titre 3</h1>
</section>
<section class="content">
  <h1> Titre 4</h1>
</section>
<section class="content">
  <h1> Titre 5</h1>
</section>
<section class="content">
  <h1> Titre 6</h1>
</section>

CSS

body{
  background:#8fd9a6
}
.content{
  margin-top:50px;
  min-height:120px;
  border-bottom:1px dashed #252525;
}
.bar{
  position:fixed;
  max-width:98%;
  height:30px;
  background:#262624;
  top:50px;
  width:98%;
}

#progressbar{
  position:absolute;
  width:10%;
  height:28px;
  background:#bd0fbd;
  left:0;
  top:1px;
  cursor:pointer;
}

JavaScript

$('#progressbar').click(function(){
    alert('hello');
});
$(document).ready(function(){
			$(window).scroll(function(){
				var width = $(window).scrollTop();
                $('#progressbar').css({
                    width : width+'%'
                });
			});
		});