AutoFix_Anything.js закрепляем любой блок


Содержание

peachananr/autofix_anything

Fix position of anything on your website automatically with one js call

#Auto Fix Anything by Pete R. This little plugin will let you automatically fix position of any container on your website with one JS call Created by Pete R., Founder of BucketListly

Modern browsers such as Chrome, Firefox, and Safari, on desktop have been tested.

With this plugin you can dynamically fix a container within the viewport with one JS call. The plugin will detect when to fix/unfix the position automatically.

To add this to your website, simply include the latest jQuery library together with jquery.autofix_anything.js and autofix_anything.css into your document’s and call the function as follows:

Although, the HTML and CSS structures below are not mandatory, following it will help the plugin perform better out of the box

You can also fix your containers programmatically as well:

This method will let you toggle the fix state of the container. The method will detect whether to fix or not to fix based on the current state.

Note: Make sure the manual option of the main function call is toggled to true.

and call this function anywhere you like to toggle it.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Project Statistics

Sourcerank 7
Repository Size 123 KB
Stars 324
Forks 99
Watchers 23
Open issues 4
Dependencies
Contributors 1
Tags
Created Oct 11, 2013
Last updated Jul 29, 2020
Last pushed Dec 2, 2020

Top Contributors See all

Something wrong with this page? Make a suggestion

Last synced: 2020-07-29 19:37:45 UTC

Login to resync this repository

Libraries.io helps you find new open source packages, modules and frameworks and keep track of ones you depend upon.

Copyright © 2020 Tidelift, Inc
Code is Open Source under AGPLv3 license
Data is available under CC-BY-SA 4.0 license

Фиксация элемента при прокрутке страницы

Речь пойдет о распространенной фиче — фиксации HTML элемента вверху окна браузера, при прокрутке страницы вниз.


Добавьте код блока в HTML-страницу.

Инициализируйте этот блок, как плавающий элемент.

В подключите скрипт, реализующий обработку скролла.

Комментарии к статье: 13

Возможность комментировать эту статью отключена автором. Возможно, во всем виновата её провокационная тематика или большое обилие флейма от предыдущих комментаторов.

Если у вас есть вопросы по содержанию статьи, рекомендуем вам обратиться за помощью на наш форум.

jQuery — Фиксирование блока при прокрутке

Последнее изменение поста: 23 октября 2020 в 21:54

Сегодня небольшой урок о том как при помощи jQuery зафиксировать блок при прокрутке. Рассмотрю на основе bootstrap 4 меню, так как в 4м бутстрапе больше не используется afix. Но это применимо по сути для любых блоков. Итак у нас есть обычное стандартное меню:

и мы его хотим зафиксировать после прокрутки страницы, для этого воспользуемся jQuery

где #top-a это id меню, а 200 — это число через сколько пикселей производить фиксацию, все)

Скрипт фиксации элемента при прокрутке не срабатывает. Помогите найти ошибку

Пытаюсь зафиксировать кнопку «Позвонить» при прокрутке страницы. Нашла скрипт, который добавляет класс выбранному элементу при прокрутке. Вставляю этот код перед закрывающим body:

Добавленному скриптом классу прописываю стили:

И не работает у меня ничего :(

В примере, откуда брала код, все работает, а у меня на странице — нет. О js у меня совсем поверхностное представление. Подскажите, что неправильно?

Пыталась также добавить класс непосредственно div , но тоже не работает.

AutoFix_Anything.js: закрепляем любой блок

Повторное подключение jQuery может привести к некоторым проблемам.

Чаще всего в инструкциях по установке различных плагинов (например, фото-галереи, увеличение изображений и т. д.) предлагается подключить jQuery-библиотеку.

Для uCoz-сайтов этого делать не нужно!

Код подключаемой библиотеки должен выглядеть примерно следующим образом:


Удалите этот код, чтобы не происходило конфликта двух jQuery-библиотек.

Отключить автоматически подключаемую jQuery-библиотеку можно следующим образом:

В шаблонах замените код

Примечание: также, автоматически перед тегом

подключается скрипт (/.s/src/uwnd.min.js), отвечающий за работу некоторых стандартных функций (AJAX-окна, отправка форм и т. д.) и файл стилей (для AJAX-окон — /.s/src/layer7.css). Поэтому, если Вы будете отключать автоматически подключаемую jQuery не забудьте подключить выше написанные файлы.

Все скрипты необходимо подключать после тега
.

Почему именно после , а не между и ?

Дело в том, что jQuery подключается в любом случае последним в зоне между и , поэтому скрипт подключенный между и , использующий jQuery работать не будет, т. к. используемые там jQuery-функции ещё не будут определены.

На данный момент существует возможность в общих настройках выбрать автоматически подключаемую версию jQuery-библиотеки между 1.12.4.min.js и 3.3.1.min.js:

Проблемы, которые могут возникнуть из-за повторного подключения jQuery:

  • Проблемы с авторизацией — чаще всего это обновление страницы во время авторизации;
  • Проблемы при добавлении материала — страница либо также обновляется (при этом добавления материала не происходит), либо при клике по кнопке «Добавить» ничего не происходит;
  • Проблемы с AJAX-окнами — неработоспособность функций для работы с AJAX-окнами (то есть AJAX-окна могут просто не открываться, либо открываться и сразу закрываться);
  • Проблема с админ/юзер-баром — как правило, его отсутствие.

jQuery плагин фиксирующегося липкого блока

Работая над одним из проектов, возникла задача сделать липкий фиксирующийся блок при прокрутке страницы в одной из колонок сайта. Решение казалось простым. Я часто встречал подобные решения на GitHub и первое, что пришло в голову — это взять готовый jQuery скрипт липких блоков и прикрутить его к нашему сайту. В итоге, корректно работающего плагина найти не удалось и было принято решение писать свой jQuery скрипт, который позже получил название Air Sticky Block и который мы выложили в свободный доступ на GitHub в официальный репозиторий блога “Постовой”.

Цукерберг рекомендует:  Как запустить какой-либо проект

В этом топике я расскажу о том, почему мы решили написать свой плагин для создания липких блоков, и почему масса других не подошла, с какими проблемами столкнулись при разработке, какие проблемы решили, а какие нет. Итак. К вашему вниманию бесплатный jQuery плагин липких фиксирующихся блоков в сайдбаре при прокрутке страницы под названием Air Sticky Block.

Какая была задача?

Внизу одной из колонок сайта находился баннер. Он был в самом низу сайдбара, а над ним еще очень много блоков различной высоты. При этом, высота этих блоков была абсолютно разной на каждой странице сайта. Нам требовалось сделать так, чтобы докручивая страницу до баннера, он бы фиксировался, то есть позиция блока менялась на position: fixed;.Таким образом, блок должен прилипать к верхней части страницы и быть всегда на виду у посетителя. После того, как пользователь докручивает до футера, блок должен останавливаться и уходить за пределы рабочей области монитора вместе с сайдбаром. То есть, требуется повторная смена позиционирования при достижении определенной точки сайта.

Почему другие jQuery плагины липких блоков не подошли?

Задача, на первый взгляд, казалась довольно простой и не требовала особых усилий. Но это лишь на первый взгляд. Начав тестировать плагины других разработчиков, стало понятно, что нужно будет попотеть.
Чтобы не растягивать статью, сразу приведу список того, что не устроило в десятках протестированных jQuery плагинов липких блоков:

  • Многие плагины не видят финишной точки. То есть, докручивая до футера, блок остается фиксированным и просто “наезжает” на футер. Такая реализация плагина имеет место быть, но она не выполняет наших задач.
  • Ряд плагинов работает корректно только тогда, когда блок, который должен прилипать, находится в абсолютном позиционировании, т.е. всегда в одной и той же позиции в колонке.
  • В момент, когда все колонки сайта перестраивались одна под другой, все ломалось.

Недостатков можно перечислить много, наверняка они найдутся и в нашем плагине, но все же основным оказалось то, что все готовые решения, рассмотренные нами, не были предназначены для адаптивных сайтов.

Что в итоге получилось и какие преимущества Air Sticky Block?

Спустя некоторое время, плагин для фиксации div блока в сайдбаре был написан. При разработке всплывало много “подводных камней”, о которых мы и подумать не могли, когда начинали разработку. В итоге получился довольно хороший скрипт, более продуманный и универсальный по сравнению с подобными разработками наших коллег.

Преимущества нашего плагина Air Sticky Block


  • Корректно работает во всех разрешениях и сетках, вам не придется скрывать блок из-за того, что все сломалось после перестройки блоков,
  • Реагирует на изменение ориентации устройства,
  • Реагирует на изменения размеров рабочей области браузера;

Что плагин пока не умеет делать?

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

Установка и настройка плагина

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

1. Подключение файлов

Добавьте эти файлы перед закрывающимся тегом . Это подключит библиотеку jQuery и основные JS файлы Air Sticky Block

2. Добавление разметки

Разметка Air Sticky Block очень проста и полностью совместима с разметкой Bootstrap. Вам не придется модифицировать ваш код или что-то дорабатывать в нем, необходимо всего лишь добавить два класса:

    Класс airSticky_stop-block необходимо добавить контейнеру, в котором находится ваша сетка div >
3. Подключение Air Sticky Block

Пришло время активировать наш плагин. Вставьте следующий код перед закрывающимся тегом так, чтобы они были после шага 1

4. Настройки Air Sticky Block

Настроек у плагина всего лишь две: это включение режима отладки, при котором на экран выводится блок со всеми расчетами, и вторая настройка — это указание класса контейнера, в котором находится сетка.

На этом, пожалуй, все. Вашему вниманию был представлен jQuery плагин фиксации «липкого» блока при скроллинге для адаптивных сайтов — Air Sticky Block. Надеюсь, он будет вам полезен.
Кстати, он отлично подойдет к адаптивным Bootstrapшаблонам из этих подборок:

  • 10 бесплатных Bootstrap шаблонов WordPress
  • 23 бесплатных html шаблона на Bootstrap
  • 23 бесплатных адаптивных html шаблона

Смотрите также:
6 jQuery плагинов для создания фиксированного меню

Также вы можете видеть его работу и на нашем сайте — в правом сайдбаре фиксированный блок с баннером.

Как сделать плавающий блок на сайте?


Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу ( тизеры , баннеры или контекст ).

Такая «плавающая» реклама заметно повышает число показов и переходов по ней, а соответственно и доход.

Рекламу Adsense помещать в фиксированный блок нельзя.

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

Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.

Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.

Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).

Самый рабочий способ

Существует много вариантов реализации прилипающего блока, но не все они работают корректно. Скажу из личного опыта: один и тот же метод установки блока может сработать на одном сайте, а на другом появятся косяки.

Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).

Цукерберг рекомендует:  Где разработчику жить хорошо. Часть 9

В желаемом месте боковой колонки вставляем такой HTML-код:

Далее создаем файл fixads.js и прописываем в него:

$ ( window ) .scroll ( function ( ) <
var sb_m = 20 ; / * отступ сверху и снизу * /
var mb = 300 ; / * высота подвала с запасом * /
var st = $ ( window ) .scrollTop ( ) ;
var sb = $ ( «.sticky-block» ) ;
var sbi = $ ( «.sticky-block .inner» ) ;
var sb_ot = sb.offset ( ) .top;
var sbi_ot = sbi.offset ( ) .top;
var sb_h = sb. height ( ) ;

if ( sb_h + $ ( document ) .scrollTop ( ) + sb_m + mb ( document ) . height ( ) ) <
if ( st > sb_ot ) <
var h = Math.round ( st — sb_ot ) + sb_m;
sb.css ( < "paddingTop" : h >) ;
>
else <
sb.css ( < "paddingTop" : 0 >) ;
>
>
> ) ;

В этом коде можно задать отступы сверху, снизу, а также высоту вашего подвала, т.е. ту высоту, на которой блоку нужно остановиться.

Теперь подкключаем JS. Для этого прописываем в секции HEAD:

Самый простой способ (для WordPress)

Также безотказный метод, но при помощи установки плагина Q2W3 Fixed Widget (Sticky Widget). Работает без косяков.

Достоинства:

  • не нужно разбираться/понимать HTML;
  • простота и скорость установки.

Недостатки:


  • лишняя нагрузка на сервер;
  • не гибкий. Плавающим становится весь виджет (включая название и его оформление). Допустим, сделать этот блок иным цветом или размером будет сложно.

Как пользоваться:

  1. Скачиваем плагин.
  2. Устанавливаем.
  3. Активируем.
  4. Заходим в админке во вкладку: Дизайн -> Виджеты. Открываем тот виджет, который хотим сделать фиксированным.
  5. Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».

Другие способы реализации скользящих блоков

Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.

Вариант #1 (без jQuery)

В сайдбар вставляем:

Прописываем стили в HTML (лучше добавить сразу в CSS):

Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):

AutoFix_Anything.js: закрепляем любой блок

Добавление от 16.03.2020 06:48:

Кстати, почему-то баннерорезки в Хроме не режут ЯндексДирект, а в Опере отлично режут.

Добавление от 16.03.2020 06:56:

А еще в Опере отлично блокируется видео с автоплейем

11. tu_ _rist , 17.03.2020 09:55
https://www.youtube.com/watch?v=QL27XBf9vEQ — ссылка на видео непосредственно по теме,
https://forums.lanik.us/viewtopic.php?f=102&t=22512 — о подписке RU AdList и дополнениях —
смотреть подписку RU AdList JS Fixes — установил в браузер Хром плагин Tampermonkey и подписку
RU AdList JS Fixes, в результате Яндекс Директ убран, но только частично (
12. Kolobokk , 17.03.2020 11:06
tu_ _rist
ссылка на видео непосредственно по теме,
Специально зашёл на страницу, которая показана в видео. Отключил расширение AdBlock, реклама, на которой вы заострили внимание, появилась. Включил AdBlock — реклама исчезла. Что я делаю не так?

Может бы где-нибудь запретили обновление Chrome или AdBlock. Я просто замечаю, что после некоторых обновлений есть мелкие изменения, как в Chrome, так и в AdBlock. В частности в AdBlock не так давно интерфейс немного изменился, а именно, часть опций стала на английском, хотя при первой установке все были на русском. За это время я сам ничего, ни в Chrome, ни в AdBlock не трогал.

13. sergey_volosat , 17.03.2020 15:45
О черт! Вот теперь от ЯндексДиректа уже не помогают ни Ghostery, ни Adguard, ни Opera.

Что делать? Есть ли какой-нибудь действенный метод ЯДРО?


14. mbrz , 17.03.2020 16:03
sergey_volosat
Что делать? Есть ли какой-нибудь действенный метод ЯДРО?

Для начала выполнить то, что советуют выше — uBlock (и если нужно, Tampermonkey+RU AdList JS Fixes). А вдруг .

15. sergey_volosat , 17.03.2020 17:19
Все решилось гораздо проще:

1. Вычищаете свой браузер от кеша и кукиза

2. Ни при каких случаях не заходить на Яндекс и не пользоваться любым сервисом, который связан с Яндексом

Добавление от 17.03.2020 17:46:

upd. Все равно ЯД возвращается

Добавление от 17.03.2020 17:46:

16. petr0v , 17.03.2020 19:14
sergey_volosat

Кстати, почему-то баннерорезки в Хроме не режут ЯндексДирект

Удивительно да? Гугл — компания зарабатывающая на контекстной рекламе, пилит свой браузер ради. мира во всём мире.

В альтернативных браузерах никаких проблем с выполнением желаний своего хозяина — пользователя.

17. sergey_volosat , 17.03.2020 21:13
petr0v

Опера тоже «легла» под ЯндексДирект

18. petr0v , 17.03.2020 21:50
sergey_volosat

Пользуюсь Pale Moon + NoScript + uBlock, надо немного разобраться с настройкой и использованием расширений.
Даже не знаю как выглядит ЯндексДирект.

19. tu_ _rist , 09.04.2020 14:21
решение вопроса(как вариант): портабельный хром в.60 или выше+менеджер стилей Stylish(установленные плагины — RU AdList CSSFixes, Yandex.ru remove ads, Mail.ru other, ok.ru — no ads)+Adblock Plus(можно Adblock)+uBlock(можно uBlock origin)+Tampermonkey( RU AdList JS Fixes), — в результате, на основных ресурсах Яндекса, Яндекс Директ не наблюдается, также не наблюдается Майлру Директ полностью или частично
20. mbrz , 09.04.2020 21:15
mbrz
Для начала выполнить то, что советуют выше — uBlock (и если нужно, Tampermonkey+RU AdList JS Fixes).

sergey_volosat
Все решилось гораздо проще:

1. Вычищаете свой браузер от кеша и кукиза

2. Ни при каких случаях не заходить на Яндекс и не пользоваться любым сервисом, который связан с Яндексом
Добавление от 17.03.2020 17:46:

upd. Все равно ЯД возвращается


Опера тоже «легла» под ЯндексДирект

(мыши кололись, плакали, но продолжали есть . ) uBlock установлен, фильтры настроены ?

21. sergey_volosat , 21.05.2020 05:18
На старом ноуте стоял Adguard, который хорошо резал ЯД. Сейчас у меня Хромбук с uBlock и Ghostery, но траблы с ЯД постоянно вылазят. Перечитал все ветки настройки фильтров, но как только заходишь на Ленту.ру выскакивает ЯД, а на Газете.ру ЯДа нет. Я даже в Хроме прописал адрес Ленты.ру с запретом скриптов, но не помогает.
24. Железячник , 21.05.2020 14:24
sergey_volosat

25. sergey_volosat , 24.05.2020 03:59
Железячник

Огромное спасибо! Реально помогло избавится от ЯДа! А то невозможно было заходить на сайты.

26. 4z , 24.05.2020 04:30
СергейПетрович
yandex.ru/tune/adv
27. Fedor Gromov , 15.09.2020 17:05
Все просто. Поставьте uBlock Origin, В нем забаньте palacesquare.rambler.ru, developers.rambler.ru, id.rambler.ru, c.rambler.ru.
28. Paulr , 16.03.2020 02:37
UP. Скрипт для Tampermonkey поломался после обновления. Похоже, его разработчики перешли на новую среду.
Поиск в гугле навел на альтернативный вариант скрипта https://greasyfork.org/ru/scripts/19993-ru-adlist-js-fixes.
Установил, тестирую.
29. routir , 22.03.2020 23:55
Скрипт зачищает рекламу даже в ДЗЕНе, правда остаются пустые места, но это издержки производства)
30. vlad001 , 30.03.2020 14:39
routir
правда остаются пустые места, но это издержки производства [source=24:49284:29]
Их тоже можно убрать .
(https://ibb.co/zZvSKJR)
32. Nekeet , 21.05.2020 12:37
vlad001
Как.
33. vlad001 , 16.06.2020 13:11
Nekeet
Сейчас точно не помню что из них, но вот:

Это фильтр для privoxy. Какая-то из этих 4-х строчек прячет пустые места/рекламу.

34. Alchanoid , 26.07.2020 22:06
Это всё, конечно, хорошо и действительно помогает, вот только Tampermonkey при установке под FF запрашивает следующие разрешения:

Получать доступ к вашим данных на всех сайтах

Помещать данные в буфер обмена

Загружать файлы, а также читать и изменять историю загрузок браузера

Показывать вам уведомления

Получать доступ ко вкладкам браузера

Хранить неограниченное количество данных на стороне клиента

Получать доступ к активности браузера при навигации


А не до хрена ли хочет разработчик по имени Jan Biniok? И не пойти бы ему в пешее эротическое с такими запросами? Вопрос риторический.

В общем, Tampermonkey закономерно идёт лесом и автоматически (для меня) переходит в категорию крайне «сомнительных» расширений. Имхо, лучше юзать ublock + отредактированный hosts, о чём писали выше, чем этого кота в мешке.

35. mbrz , 26.07.2020 22:27
Alchanoid
А не до хрена ли хочет разработчик по имени Jan Biniok? И не пойти бы ему в пешее эротическое с такими запросами? Вопрос риторический. [source=24:49284:34]

В общем, Tampermonkey закономерно идёт лесом и автоматически (для меня) переходит в категорию крайне «сомнительных» расширений. [source=24:49284:34]

Тогда нужно быть последовательным, раз уж такое возмущение кипящего разума — в тайгу также отправь ОС Windows, браузеры, скайп, антивирусное ПО. etc. Ах да, смартфоны etc тоже в пампасы.

Google PageSpeed Insights: «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

В этой статье я расскажу, что означает рекомендация удалить блокирующие скрипты и стили и как её выполнить.

Это одна из наиболее распространенных проблем, которую я встречаю, анализируя веб-сайты. Решение данной задачи — один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний.

Хочу обратить внимание – каждый сайт индивидуален. И если для одного сайта некоторые решения будут полезны, то для другого могут оказать негативное влияние.

Суть проблемы

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.

Как удалить JavaScript, препятствующий отображению верхней части страницы

Большинство рекомендаций в Интернете сводятся к тому, чтобы перенести все скрипты в подвал сайта. Однако не стоит слепо выполнять эту рекомендацию — есть большая вероятность того, что функционал сайта будет нарушен:

    Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы. Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например: Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
  • Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.

Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.

Прокрутка контента внутри блока на Javascrip.

Вступление.

При создании сайта очень часто возникает необходимость реализовать вертикальную прокрутку контента внутри блока

В этой статье я расскажу вам, как сделать прокрутку контента в блоке и сам скроллбар c помощью JavaScript двумя способами — используя события wheel и scroll . Будут подробно рассмотрены HTML-вёрстка, CSS и сам код на чистом JavaScript.

Пример блока с вертикальной прокруткой и кастомным скроллбаром:

Составим техническое задание на создание прокрутки контента внутри блока:


  1. Прокрутка должна осуществляется колёсиком мыши при наведении на выбранный блок или перетаскиванием ползунка скроллбара.
  2. Блок должен иметь кастомный скроллбар с высотой ползунка, зависящей от размера контента внутри блока.
  3. При прокрутке контента в блоке использовать на выбор:
    — событие вращения колёсика мыши wheel;
    — стандартное событие scroll, возникающее при прокрутке блока.
  4. На странице может быть несколько блоков с прокруткой контента.
  5. Ширина и высота блоков с прокруткой не должна влиять на работу скрипта.

HTML-вёрстка, стили и JavaScript для обоих вариантов прокрутки блока совпадают, поэтому я подробно расскажу о прокрутки блока по события wheel , а потом рассмотрим особенности и отличия управления прокруткой по событию scroll .

HTML-разметка блока с прокруткой.

Давайте сверстаем блок, как представлен на картинке выше. Он будет состоять из трёх основных частей:

  1. Блок заголовка.
  2. Вьпорт, где будет прокручиваться контент. В нашем случае — это нумерованный список.
  3. Подвал (футер).
    class = «content-list» >

Кратко рассмотрим назначение каждого элемента:

Обратите внимание — показ дефолтной полосы прокрутки мы запретили, а HTML-вёрстку кастомного скроллбара не сделали. Он будет формироваться JS-скриптом в случае необходимости, т. е., если высота контента больше высоты вьюпорта. Такое решение предоставляет большую гибкость в применении, отсутствует зависимость от высоты контента. Это удобно, когда на странице несколько таких блоков с разным наполнением контентом.

Таблица стилей для блока с прокруткой.

Ниже я приведу только те стили, которые непосредственно относятся к блоку с прокруткой контента.

Начинаем писать JavaScript для блока с прокруткой контента.

Первое, что мы сделаем, это создадим анонимную самозапускающуюся функцию, внутри которой и будет расположен наш код.
Нужно взять за правило ограничивать область видимости скрипта, чтобы исключить конфликты с другими JS-скриптами подключенными к странице.

При написании JS-скрипта мы будем использовать прототипное наследование. Это позволит создать несколько блоков с прокруткой на одной странице.

Для создания объектов блоков с прокруткой контента мы будем использовать конструктор, т. к. он хорошо подходит для создания множества похожих объектов, имеющих одинаковую структуру, с общими именами свойств и методов. В JavaScript это называется наследованием через прототипы, а объект от которого наследуются свойства и методы, называется прототипом. В нашем случае, это объект созданный конструктором. Другими словами, механизм работы наследования через прототипы заключается в наследовании и повторном использовании свойств и методов созданных в конструкторе, с возможностью расширения свойств во вновь созданном объекте.
Конструктор представляет из себя обычную функцию с набором настроек, определяющих структуру блоков с прокруткой, их поведение и способы управления.

Конструктор принимает два аргумента:

  1. container — объект блока с контентом, экземпляр которого создаётся в данный момент;
  2. nameEvent — событие, которое будет использоваться для прокрутки контента.

Прежде чем рассмотривать конструктор, давайте разберёмся, что его вызывает и откуда берутся его аргументы.

Создание коллекции блоков с прокруткой и её обработка.

Первое, что необходимо сделать — найти на странице все блоки, где будет прокручиваться контент.
Рассматривая HTML-вёрстку, мы выяснили, что у все этих блоков есть атрибут data-control , значение которого определяет событие, управляющее прокруткой. Используя этот атрибут, мы создадим коллекцию нужных нам элементов.

При переборе полученной коллекции элементов, мы выполним следующие действия:

  1. определим значение атрибута data-control текущего блока;
  2. создадим экземпляр текущего блока, используя конструктор;
  3. создадим HTML-вёрстку скроллбара, если высота контента в текущем блоке больше высоты вьюпорта.
  4. зарегистрируем обработчики событий.

Рассмотрим JS-код, реализующий наши действия:

Цукерберг рекомендует:  Создание онлайн-радио с помощью jQuery и jPlayer
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих