الدرس 42 : طريقة إضافة النسبة المئوية للسكلور بار أو شريط التمرير

بسم الله الرحمان الرحيم

السلام عليكم أحباء ومتابعي مدونة منبع المعلوميات

اليوم إنشاء الله راح نطرح طريقة إضافة النسبة المئوية للسكلور بار "scroll bar" أو ما يعرف بشريط التمرير الإضافة تتمثل في إضافة عداد له بشكل أنيق ومتميز .

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

يمكنكم رؤيتها على هذه المدونة التجريبية :

من هــنــا

حسنا أما طريقة التركيب فهي كالأتي :

أولا ندخل للمدونة --> قالب --> تحرير html

ثم كنترول + f

ثم نبحث عن

]]></b:skin>

ثم نضع هذا الكود فوقه مباشرة :

/* Code By sourceinformatics.blogspot.com */
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#32C2A5;
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;
}
/* End Code By sourceinfomatics.blogspot.com */

و بعد ذلك نمر إلى البحث عن

<body>

و نلصق هذا الكود مباشرة أسفل الكود

<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>

هكذا الإضافة تكون ركبة بنجاح أتمنى تكون عجبتكم و السلام عليكم و رحمة الله و بركاته

الصفحات