آموزش ساخت نوار نمایش درصد پیمایش صفحه با جاوااسکریپت و سی اس اس

زیبایی و کاربردی بودن امکانات یک سایت اصل در طراحی سایت است؛ و ربطی به طراحی سایت با وردپرس یا بدون وردپرس ندارد.

در پروژه طراحی قالب سایت با وردپرس قبلی، بنا بر نیاز مشتری لازم بود که به کاربر نمایش داده شود چقدر از کل صفحه را اسکرول کرده. برای یک آموزش زیبا، ساده، کوتاه و کاربردی با ما همراه شوید.

ابتدا کد زیر را به قبل از تگ footer قالب سایت خود اضافه کنید:

<div class="scrolled-progress"></div>

سپس کد CSS3 زیر رو به انتهای فایل استایل اضافه کنید. در وردپرس فایل style.css اصلی قالب:

.scrolled-progress {
  position: fixed;
  width: 0%;
  height: 6px;
  top: 0;
  left: 0;
  background: #5C6CFC;
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #5C6CFC), color-stop(100, #E71D36));
  background: linear-gradient(to right, #5C6CFC 0, #E71D36 100);
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
  z-index: 100;
}

با استفاده از کدهای بالا یک نوار خطی به صورت ثابت در بالای سایت اضافه کردیم. اصل کار ما با جاوااسکریپت انجام میشود:


var h = document.documentElement,
  b = document.body,
  st = 'scrollTop',
  sh = 'scrollHeight',
  progress = document.querySelector('.scrolled-progress'),
  scroll;

document.addEventListener('scroll', function() {
  scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  progress.style.setProperty('width', scroll + '%');

});

حالا اگر توجه کرده باشد، یک نوار زیبای گرادیانی آبی و قرمز به بالای صفحه اضافه شده و هنگامی که اسکرول میکنید طول آن تغییر میکند.

درج نظر
نظر خود را درباره آموزش ساخت نوار نمایش درصد پیمایش صفحه با جاوااسکریپت و سی اس اس بنویسید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات کاربران

هنوز هیچ نظری برای این پست ثبت نشده است. شما اولین نفر باشید!