custom scroll bar

Change class name on click in jQuery

by Satheesh Kumar

HTML

<br>
<div class="scroll">
Percentage Scrolled <span></span>
</div>
<div class="fx">

</div>

CSS

body{
margin:  0px;
height: 5000px;
}
.fx{
  position: fixed;
  width: 30px;
  height: 30px;
  background: red;
  top: 0;
  transform: translateY(-100%);
}
body{
  font-size:16px;
  line-height:1.75;
  background:0 0;
  padding:30px;
  white-space:pre;
  -webkit-overflow-scrolling:touch;
  display:block;overflow-x:scroll;max-width:100%;min-width:100px;scrollbar-color:#666;scrollbar-width:.5em}
  body::-webkit-scrollbar{width:.5em;height:.5em}
  body::-webkit-scrollbar-thumb{background:#666;border-radius:.5em;-webkit-box-shadow:inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);box-shadow:inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)}
  body::-webkit-scrollbar-track{background:linear-gradient(to right,#201c29,#201c29 1px,none 1px,none)}

JavaScript

$(window).on("scroll", function(){
    var scroll = $(window).scrollTop();
        var wH = $(window).height();
        var bH = $("body").outerHeight();
		var lv = bH - wH;
		var per = (scroll / lv) * 100;
        $("span").text(per);
        $(".fx").css("top", per+"%");
/* var bottom = $("div").offset().top + $("div").outerHeight(true);
var top = $("div").position().top;
var h =$("body").outerHeight(true);
 */console.log("scroll : ", scroll, "Height : ", wH , "Percentage : ", per);
})