Фиксированная шапка при прокрутке страницы

Фиксированная шапка при прокрутке страницы

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице.

Из минусов – не корректно работает на мобильных.

У таблицы добавляется только класс – fixtable .

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

Используем Sticky JS

  1. Качаете файл https://raw.githubusercontent.com/rgalus/sticky-js/master/dist/sticky.min.js
  2. Сохраняете его на хостинге, где расположен сайт, и подключаете его в шаблоне:
  3. Инициализируете скрипт:

Здесь .selector — это jQuery селектор блока, который должен залипать при прокрутке.

Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container

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

Как сделать фиксированное меню в шапке

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

  • Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
  • Иначе отключаем залипание

Вот и вся логика.
Можете проверить, как работает

HTML будет представлять собой что-то навроде

JavaScript

В Javascript будем определять нашу логику

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

В CSS определяется класс, которым фиксируем меню

Строки 4, 5, 6 не обязательны, по могут помочь при горизонтальном выравнивании и создании эффекта полосы на всю ширину экрана.
Прозрачность регулируется в background: rgba(255, 0, 0, 0.1); , а именно в последнем параметре 0.1 , варируется от 0 (прозрачный) до 1 (непрозрачный), это аналог css свойства opacity

Читайте также:  7499 Что за связь

Фиксированный виджет в сайдбаре

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

Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку

Q2W3 Fixed Widget — это Вордпресс-плагин, который позволяет при прокрутке страницы залипать виджетам, расположенным сбоку в сайдбаре.

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

Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку

У каждого виджета появляется возможность залипания

Как сделать залипающий виджет, который не налезает на низ сайта

Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:

  1. Координату Y верха виджета
  2. Высоту виджета
  3. Координату Y подвала сайта

Далее, на событии window.scroll мы считаем текущие координаты верха браузера.

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

JavaScript

Перед скриптом необходимо загрузить jQuery

Если код выше не помогает, проверьте, не использует ли какой-либо из родительских контейнеров css-свойство backface-visibility: hidden; . Если так, то можно заменить код

Делаем залипание в сайдбаре вручную, вариант №2

Этот вариант сугубо кастомный, основан на специальном PHP-классе Kama_Contents, реализацию можно увидеть справа в боковой колонке. Выложу код и логику, пригодится.

Читайте также:  Что делать если dualshock 4 не заряжается

Предварительная подготовка

Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery

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

Код HTML

Для примера возьмём содержание этой страницы

Код Javascript

В заключение

Если вам понравилась статья, но что-то не получается переделать под свои нужды, не стесняйтесь спрашивать об этом в комментариях, вместе найдём решение.

Допустим у вас важная информация например контакты находятся в шапке и вы хотите что бы они всегда были на веду у клиента или просто хотите что основная навигация всегда была под рукой.

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

И теперь добавим необходимые стили:

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Ссылка на основную публикацию
Файловый менеджер для ubuntu server
Работа с файлами в операционной системе Ubuntu осуществляется через соответствующий менеджер. Все дистрибутивы, разработанные на ядре Linux, позволяют юзеру всячески...
Удалить одноклассники страницу с телефона айфон
Если вы хотите удалить свою страницу (профиль) в Одноклассниках, особенно если это требуется сделать со смартфона Android или iPhone —...
Удалить папку не удалось найти этот элемент
В этой инструкции подробно о том, как удалить файл или папку, если при попытке это сделать в Windows 10, 8...
Файлы dll чем открыть
Файлы формата DLL открываются специальными программами. Существует 2 типа форматов DLL, каждый из которых открывается разными программами. Чтобы открыть нужный...
Adblock detector