مع هذه الاضافة سوف تحصل على شريط تمرير بجانب شريط التمرير وهي عبارة عن نسبة مئوية تظهر بجانب شريط التمرير لمعرفة قمت بتنزيل شريط المهام بنسبة كام في المئة لتصفح الموضوع في المدونة .
طريقة التركيب
- نقوم بالدخول الى القالب
- نتقوم بالضغط على تحرير القالب ومنها نقوم بالبحث عن هذا الوسم ]]></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;
}
أهم الملاحظات حول الكود
لتغيير لون الخلفية التي هي بالازرق نقوم باستبدال هذا الكود #369FCF ستجدد الكود أكثر من مرة قوم باستبداله
لتغغير حجم الخط استبدال 14 بالحجم الذي يناسبك
الان نقوم بالبحث عن هذا الوسم </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>
