طريقة تركيب النسبة المئوية بجانب شريط تمرير

كيف تقوم بتثبت النسبة المئوية في شريط تمرير

طريقة تركيب النسبة المئوية في شريط تمرير

مرحبا بكم في تدوينة جديد و العود من جديد الي تدوين بعد غياب في هده التدوين أقدم لك طريقة تركيب النسبة المئوية بجانب شريط تمرير يجد من قام بوضع هده تدوينة لكن كل مدون ولديه إختلافات في وضع مواضيع , إنها إضافة جميلة ليست ميزة مهمة لمدونة لكن لا ضرر من محاولة وهده إضافة تفيد بها متابعك سيكون قادر على معرفة نسبة المئوية الخاص بموضوع إدا كان قد وصل الي نهاية او لا طريقة تركيب

إبحث عن ]]></b:skin> وضع هدا كود أسفله 

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

ومن بعد , إبحث عن <head/> وضع  هدا كود أسفله

 <div id='scroll'></div>    

ومن بعد أبحث عن </body> وضع هدا كود أسفله وضع هدا كود فوقه

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

كان هدا درس اليوم إن شاء الله يعجبكم