« Индикатор прокрутки страницы сайта для uCoz »

Описание материала:

Здравствуйте пользователи и гости нашего сайта. В сегодняшнем материале, я хочу предложить Вам скрипт "Индикатора прокрутки страницы сайта", для сайтов в системе uCoz. Скрипт сделан из JS, CSS и небольшого HTML кода. На изображение к материалу, расположение индикатора находится внизу, но мы предоставим два варианта стиля индикатора, внизу страницы и вверху. В CSS стиле, к каждому коду прописано его название, чтоб Вам легче было его изменить под себя.

Установка:
1. Заходим в ПУ -Управление дизайном - Нижняя часть сайта и в самый низ ставим данный код:

Код
<script>
$(window).scroll(function(){
  var ratio = $(document).scrollTop()/(($(document).height() - $(window).height()) / 100);
  $("#ie_progress").width(ratio+"%");
});
</script>
<div id="ie_indicator">
<div id="ie_progress"></div>
</div>

2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код для нижнего расположения индикатора:
Код
/* Индикатор прокрутки страницы для uCoz */
#ie_indicator {
  width: 100%; /*- Ширина индикатора прогресса -*/
  position: fixed; /*- Индикатора прогресса зафиксирован -*/
  bottom: 0; /*- Позиция индикатора прогресса -*/
  z-index: 9999; /*- Индикатора прогресса находится поверх всех элементов -*/
}
#ie_progress {
  background: #e69644; /*- Цвет индикатора прогресса -*/
  width: 0%; /*- Начальная ширина индикатора прогресса -*/
  height: 5px; /*- Высота индикатора прогресса -*/
}
/* InternetEmpire.Ru */

3. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код для верхнего расположения индикатора:
Код
/* Индикатор прокрутки страницы для uCoz */
#ie_indicator {
  width: 100%; /*- Ширина индикатора прогресса -*/
  position: fixed; /*- Индикатора прогресса зафиксирован -*/
  top: 0; /*- Позиция индикатора прогресса -*/
  z-index: 9999; /*- Индикатора прогресса находится поверх всех элементов -*/
}
#ie_progress {
  background: #e69644; /*- Цвет индикатора прогресса -*/
  width: 0%; /*- Начальная ширина индикатора прогресса -*/
  height: 5px; /*- Высота индикатора прогресса -*/
}
/* InternetEmpire.Ru */

Готово!


Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 841


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar