نقوم بإضافة الكود التالي في ملف style.css الخاص بستايل المنتدى
[code=css]
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.progress-container {
/* background-color: rgba(150, 150, 150, 0.6);*/
height: 10px;
width: 150%;
}
.progress-bar {
background-color: #2196f3;
height: 10px;
width: 0%;
}
.content {
padding: 2em;
}
[/code]
نقوم بإنشاء ملف js وندرج به الكود التالي
[code=js]
$(document).ready(function() {
$(document).scroll(function(e) {
var dimensions = {
scrollTop: $(window).scrollTop(),
documentHeight: $(document).height(),
windowHeight: $(window).height()
};
// Exclude the window to get actual height!
var pageScrolledPercentage =
dimensions.scrollTop /
(dimensions.documentHeight - dimensions.windowHeight) *
100;
$(".progress").css("width", pageScrolledPercentage + "%");
});
});
[/code]
نقوم بحفظ الملف بإسم progress.js ونقوم بنقله إلى مجلد includes/js الموجود في جذر المنتدى
من لوحة تحكم الإدارة نقوم بإنشاء قالب جديد ونعطيه الإسم progress
نفتح قالب headinclud ونضيف آخره الكود التالي
[code=plain]
{template}progress{/template}
[/code]
نقوم بعد ذلك بتفريغ كاش المتصفح ونلاحظ النتيجة
