ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Индикатор прокрутки страницы на JavaScript

Индикатор прокрутки страницы на JavaScript

Цифровой индикатор изначально станет показывать глубину прокрутки в процентах, а также в низу его будет идти линия, где выполнено на JavaScript. Также здесь задействована стилистика CSS, которая полностью отвечает за дизайн данного индикатора. А значит вы можете поменять оттенок цвета, что станет соответствовать вашему дизайну. Здесь не так сложно, вы прокручиваете страницу, и в это время меняется циферблат, а также нижнее линия.

Если рассматривать значение в цифровом формате, то прокрутив данную страницу до самого низа, вы увидите 100%, но также основу линии, которая будет на весь экран монитора иди мобильного экрана. Здесь изначально не задана ширина, и не так сильно выставлено оформление. Вероятно этот счетчик не нуждается в стилистике дизайна, но тени прописаны. Возможно нужно поменять палитру цвета, чтоб органично списался в дизайн сайта, где сделать более по формату или менее, это уже как веб-мастер видит.

Так он выглядит при установочном процессе:

Установка:

HTML

Код

CSS

Код

#indikator {
  position: fixed;
  bottom: 0;
  left: 0x;
  width: 100vw;
  color: #000;
  margin: 0;
  padding: 0;
  z-index: 1000;
}
#indikator .cidenamed {
  display: inline-block;
  background-color: #c9f9ca;
  border-bottom: 3px solid #147c4c;
  height: 3px;
  width: 0;
  box-sizing: content-box;
}
#kaipiscin {
  box-sizing: content-box;
  position: fixed;
  bottom: 18px;
  left: 18px;
  height: 100px;
  width: 100px;
  color: #038307;
  background-color: #bfffc6;
  text-align: center;
  line-height: 100px;
  border-radius: 100%;
  border: 3px solid #48b733;
  font-size: 28px;
  font-weight: bold;
  z-index: 1000;
  box-shadow: 0 3px 9px rgb(58 55 55 / 37%), 0 14px 16px rgb(159 157 157 / 24%);
}

Код

const updateScrollcidenamed = function() {
  const heightOfWindow = window.innerHeight,
  contentScrolled = window.pageYOffset,
  bodyHeight = document.body.offsetHeight,
  cidenamed = document.querySelector(".cidenamed"),
  cidenamedVal = document.querySelector("#kaipiscin")
  if(bodyHeight - contentScrolled <= heightOfWindow) {
  cidenamedVal.textContent = cidenamed.style.width = "100%"
  }
  else {
  const total = bodyHeight - heightOfWindow,
  got = contentScrolled,
  percent = parseInt((got/total) * 100)
  cidenamedVal.textContent = cidenamed.style.width = percent + "%"
  }
}
window.addEventListener('scroll', updateScrollcidenamed)

У вас есть вариант для просмотра в demo версии, где сразу можно понять как все работает, что на основных страницах сайта можно поставить, и будет видно, это сколько информации представлено.

Так как бывает материал, что замешает очень много места, и здесь крутить вниз и крутить, а вы изначально знаете по процентам на циферблате или длине линии.

Демонстрация
Источник: atuin.ru

22 Июня 2022 Загрузок: 1 Просмотров: 807 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0