Scroll kafetaria biasanya ada pada diujung samping kanan, tapi kali ini aku akan menciptakan artikel ihwal scroll kafetaria atas, menyerupai loading progress, tapi ini progress scroll bar
progress scroll kafetaria top ini memakai JavaScript
pribadi saja.
Copy CSS dibawah ini ke blog kalian
Letakkan di sebelum/diatas aba-aba </style>
#vam-scrollbar {position:fixed;top:0;left:0;overflow:hidden;width:0%;height:7px;z-index:9999;} #scrollbar {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#009ccf;} dan tambahkan JavaScript dibawah ini ke blog kalian.
letakkan sebelum aba-aba </body>
<script type='text/javascript'> //<![CDATA[ //www.vamous.id var bar_bg = document.getElementById("scrollbar"), body = document.body, html = document.documentElement; bar_bg.style.minWidth = document.width + "px"; document.getElementsByTagName("body")[0].onresize = function() { // Update the gradient width bar_bg.style.minWidth = document.width + "px"; } //www.vamous.id window.onscroll = function() { // Change the width of the progress kafetaria var kafetaria = document.getElementById("vam-scrollbar"), dw = document.documentElement.clientWidth, dh = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ), wh = window.innerHeight, pos = pageYOffset || (document.documentElement.clientHeight ? document.documentElement.scrollTop : document.body.scrollTop), bw = ((pos / (dh - wh)) * 100); bar.style.width = bw + "%"; } //]]> </script> dan terakhir masukkan aba-aba HTMLnya
<div id="vam-scrollbar"> <div id="scrollbar"></div> </div> dan Done. misalnya dapat kalian lihat, klik Button Demo
Jika kalian bingung, komen dibawah ae bro.
