Solid Scroll Bar

ezgif-5-5cf0546c397a.gif

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

Copy and paste the code below into the Header Code Injection box.

<div id='loadingbar-background'></div> 
<div id='loadingbar'>
<span id='loadingbar-cover'></span></div> 

<style> body{ 
margin-top: 4px; 
} 

#loadingbar-background{ 
position: fixed; 
z-index: 999998; 
top: 0px; 
left: 0px; 
height: 4px; 
width: 100%; 
background-color: #fafafa; 
} 

#loadingbar{ 
position: fixed; 
z-index: 999999; 
top: 0px; 
left: 0px; 
height: 4px; 
background-color: #fafafa; 
overflow: hidden; 
-webkit-border-radius: 0 1px 1px 0; 
border-radius: 0 1px 1px 0; 
} 

#loadingbar-cover{ 
position: absolute; 
z-index: 9999999; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 4px; 
background-color: #fecb2f; 
-webkit-transition: all .1s ease-in-out !important; 
-moz-transition: all .1s ease-in-out !important; 
-o-transition: all .1s ease-in-out !important; 
transition: all .1s ease-in-out !important; 
-webkit-border-radius: 0 200px 200px 0; 
border-radius: 0 200px 200px 0; 
} </style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(document).ready(function(){function o(){var o=$(window).scrollTop(),n=$("body").height(),i=$(window).height();console.log(o);var d=o/(n-i)*101;$("#loadingbar").css("width",d+"%")}$(window).load(function(){o()}),$(window).on("resize",function(){o()}),$(window).scroll(function(n){o()})}); </script>

Step Three

Change the color values #fafafa and #fecb2f (this is the actual scroll bar color) to the color codes of your choice.

To change the thickness of your progress bar, replace 4px with the required amount. All 'height' and 'margin-top' values must be exactly the same.

Save and refresh the page. 👍

Moov Labs