Как сделать подгрузку данных при скроллинге
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Как сделать эффект залипания при прокручивании страницы на блоках навигации, меню и любых других без дёрганий и анимации. Используем обычный CSS без JS , а также рассмотрим вариант на jQuery и нативный ванильный JavaScript
- Используем CSS — position:sticky
- Как сделать залипающую шапку
- Как сделать залипающий подвал
- Используем Sticky JS
- Как сделать фиксированное меню в шапке
- HTML
- JavaScript
- CSS
- Фиксированный виджет в сайдбаре
- Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
- Как пользоваться
- Как сделать залипающий виджет, который не налезает на низ сайта
- HTML
- JavaScript
- Делаем залипание в сайдбаре вручную, вариант №2
- Предварительная подготовка
- Код HTML
- Код Javascript
- В заключение
Используем CSS — position:sticky
Использование CSS -свойства position:sticky с целью достичь эффекта залипания блока внутри родительского контейнера — самый эффективный, простой и нативный способ, который работает во всех браузерах (кроме Internet Explorer, которым уже почти никто не пользуется).
Как сделать залипающую шапку
Посмотреть, как залипает header , и даже покрутить код можно на Codepen
Как сделать залипающий подвал
Посмотреть, как работает залипающий footer — Codepen
Используем Sticky JS
Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container
Этого кода вполне достаточно, чтобы покрыть большинство требований на залипающее меню, шапку сайта или виджет в сайдбаре сбоку. Если этот вариант не помог, ниже пойдут примеры, в которых наглядно объясняется принцип и механизм работы залипания с готовыми решениями.
Как сделать фиксированное меню в шапке
Всё очень просто. Всё будет основываться на том, где находится скролл на текущий момент относительно нашего меню
- Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
- Иначе отключаем залипание
Вот и вся логика.
Можете проверить, как работает
HTML будет представлять собой что-то навроде
JavaScript
В Javascript будем определять нашу логику
Если не хотите включать залипание для мобильных браузеров, вам пригодится такой код:
В CSS определяется класс, которым фиксируем меню
Строки 4, 5, 6 не обязательны, по могут помочь при горизонтальном выравнивании и создании эффекта полосы на всю ширину экрана.
Прозрачность регулируется в background: rgba(255, 0, 0, 0.1); , а именно в последнем параметре 0.1 , варируется от 0 (прозрачный) до 1 (непрозрачный), это аналог css свойства opacity
Фиксированный виджет в сайдбаре
Для больших статей дубль содержания статьи в сайдбаре в роли виджета очень удобен, видно всё содержание в категоризованном формате. Также, там можно размещать рекламу или другие виджеты с похожими статьями или чем-то подобным.
Ниже будет приведено несколько вариантов, как сделать залипающий виджет в сайдбаре сбоку от основной статьи.
Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
Q2W3 Fixed Widget — это Вордпресс-плагин, который позволяет при прокрутке страницы залипать виджетам, расположенным сбоку в сайдбаре.
Как пользоваться
Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку
У каждого виджета появляется возможность залипания
Как сделать залипающий виджет, который не налезает на низ сайта
Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:
- Координату Y верха виджета
- Высоту виджета
- Координату Y подвала сайта
Далее, на событии window.scroll мы считаем текущие координаты верха браузера.
- Если координата верха браузера выше координаты верха виджета, ничего не делаем, снимаем все эффекты
- Если прокрутили ниже верха виджета, включаем залипание
- Если прокрутили ниже координаты подвала минус высота виджета или, проще говоря, начали налезать на подвал, отключаем залипание, включаем прописку над подвалом
JavaScript
Перед скриптом необходимо загрузить jQuery
Если код выше не помогает, проверьте, не использует ли какой-либо из родительских контейнеров css-свойство backface-visibility: hidden; . Если так, то можно заменить код
на
Делаем залипание в сайдбаре вручную, вариант №2
Этот вариант сугубо кастомный, основан на специальном PHP-классе Kama_Contents, реализацию можно увидеть справа в боковой колонке. Выложу код и логику, пригодится.
Предварительная подготовка
Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery
- Создаём обёртку под будущую копию содержания статьи
- Клонируем содержание статьи и добавляем её внутрь обёртки, подчищаем код
- Отслеживаем координаты верха виджета.
- Если прокрутили ниже этой верхушки, но не достигли конца статьи, фиксируем меню
- Если достигли конца статьи, скрываем виджет меню
- В остальных случаях оставляем как и было изначально
Код HTML
Для примера возьмём содержание этой страницы
Код Javascript
В заключение
Если вам понравилась статья, но что-то не получается переделать под свои нужды, не стесняйтесь спрашивать об этом в комментариях, вместе найдём решение.
Накидал код, делающий подгрузку данных при событии скроллинга. Проблема в том, что загрузка идет по 1-му блоку. Скажите пожалуйста, как сделать загрузку по 10 блоков? Думаю, что дело в first(). Но не знаю, на что его заменить. Спасибо.
Потому что теперь возвращается массив объектов, а у него нет метода css нужно перебрать элементы и у каждого вызвать данный метод!
Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.
Посмотрите другие вопросы с метками javascript jquery scroll lazyloading content или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.28.41306
Для чего нужен Lazy loading?
В большинстве случаев, при посещении страницы пользователем, происходит одновременная загрузка всех ее элементов, что требует большего количества ресурсов, в том числе и временных. Чтобы этого избежать, применяют технологию, благодаря которой загрузка части контента и изображений происходит отложено, т.е. подгружается в первую очередь в видимой части страницы.
Специализируемся на 1С-Битрикс более 10 лет и знаем все подводные камни и специфику. Работаем с сайтами любой технической сложности и бизнес-логики. При необходимости подключаем UX-специалиста и дизайнера. В течение 2 часов реагируем на обращения в тикетной системе.
Скорость загрузки страницы существенно влияет на продвижение сайта в поисковых системах, особенно это касается Google. Поисковик заинтересован не только в том, чтобы показывать релевантный запросу пользователя контент, но, и чтобы загрузка предложенных страниц происходила максимально быстро.
Таким образом, скорость загрузки страниц напрямую относится к показателю качества ресурса.
Lazy load так же позволяет значительно снизить нагрузку на сервер или распределить ее, особенно это касается сайтов (страниц), которые содержат в себе множество картинок или другого типа медиаконтента.
Виды Lazy loading
Lazy load для изображений
Способов реализации отложенной загрузки изображений множество, рассмотрим основные.
Cкрипт от David Walsh
Суть работы этого скрипта заключается в том, что он производит замену атрибута в теге изображения на :
Подгрузка изображений происходит посредством CSS, и когда пользователь до них долистает, они плавно появятся:
Доброго времени суток.
Это совсем коротенькая статья, но все же с полезной штукой. Речь пойдет о скрипте который после того как вы начали прокрутку выводит на экран заданный блок, а при возврате вверх он исчезает. Данный скрипт я применил для вывода кнопки возвращения наверх. Также можно использовать для вывода какого-то рекламного блока или дополнительного меню, соцкнопок, в общем то что Вы захотите спрятать в начале, но показать при прокрутке. Момент появления и исчезновения определяется в расстоянии от верхней границы в пикселях.
В подвале перед закрывающимся body или в шапке перед закрывающимся head добавляем следующий скрипт.
Я добавляю в подвале, чтобы не засорять шапку и ускорить загрузку контента, а потом уже подгружать скрипты, плюс тот же PageSpeed от Google ругается, если в шапке присутствуют javascript
Данный код нужно подключать после библиотеке jQuery. Выглядит строка подключения примерно так:
Если нет такого то добавьте.
Данный блок должен быть плавающим, то есть фиксированным. В примере в начале статьи, блоку добавлены следующие обязательные стили
Если вы нигде не ошиблись и ничего не перепутали, то можете проверить результат. При прокрутке, в заданном месте Ваш блок появится во всей красоте 🙂
На этом все, спасибо за внимание 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Существует много различных плагинов, чтобы "залепить" блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.
"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS
Вариант на CSS (position: sticky):
Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky
Такой элемент будет рассматриваться как относительно позиционированный до тех пор, пока родительский контейнер не пересечет указанный порог, в котором он прокручивается, после чего он обрабатывается как фиксированный до тех пор, пока не встретит противоположный край содержащего его блока. Другими словами этот элемент остается ограниченным родительским контейнером, в котором он находится.
Читайте также: