Якоря и прокрутка страницы

download Скачать scrolled_ML_v2.js

Версия скрипта 2.0, последнее обновление: 11.05.2021

Закрепление блоков при прокрутке страницы

Управляемый объект
  • data-scrolled='#id' - помечает объект #id;

  • data-scrolled-type='#type' - определяет тип поведения объекта; #top - фиксирует/освобождает элемент сразу после того, как он скрывается за верхней границей экрана (по умолчанию); #sticker - элемент прилипнет к верхней части экрана (то же что и #top, только объекту не нужно скрываться за верхней частью экрана); #container - фиксирует элемент внутри своего родителя;

  • data-scrolled-start='#min-width' - минимальная ширина экрана для активации свойства (0 по умолчанию);

  • data-scrolled-shift='#value' - внешний отступ прилипания;

  • data-scrolled-mod='#mod' - добавляет модификатор поведения: saveWidth - сохраняет ширину;

Примечание
  1. Класс при прокрутке вниз - scrolled_down;

  2. Класс при прокрутке вверх - scrolled_upp;

Прокрутка к якорям

Объект управления
  • data-anchor - помечает объект, как объект с плавной прокруткой к якорю;

Примечание
  1. Объект управления - a, у которой href="id";

  2. Якорь - объект, у которого id="id";

Отображение текущего блока в навигации по странице

Группа управляемых объектов
  • data-anchor='#id' - объединяет объект в группу;

Примечание
  1. Объект управления - a, у которой href="id";

  2. Якорь - объект, у которого id="id";

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

Управляемый объект
  • data-scrolled-indicator - инициализируем индикатор, который получает width равный прокрутке страницы