Как создать липкий нижний колонтитул только для CSS
Обычно нам нужен JavaScript для выполнять эффекты прокрутки связанные с различными действиями пользователя на веб-страницах. Сценарий делает работу отслеживание того, как далеко вверх или вниз пролистывается страница, а также запускает действие при достижении пороговой высоты.
Нет ничего плохого в том, чтобы использовать JavaScript для прокрутки. На самом деле есть более сложные случаи, которые невозможно решить без JavaScript. Однако есть CSS хаки которые могут заменить эти сценарии в разы.
Этот пост покажет вам хоw для создания эффектов отображения нижнего колонтитула при прокрутке страницы с использованием CSS. Мы будем использовать два варианта использования, чтобы продемонстрировать это: один для всей страницы (см. Демонстрацию) и один для отдельных элементов страницы, таких как статьи.
Полная страница
Нам нужно создать нижний колонтитул, который появляется из-под страницы в то время как пользователь прокручивает вниз. Кроме того, когда они прокручивают страницу назад, нижний колонтитул должен быть скрытым снова под страницей.
Чтобы достичь этой цели, сначала мы должны создать нижний колонтитул с фиксированным положением внизу экрана.
1. Создайте фиксированный нижний колонтитул
Давайте добавить контент и нижний колонтитул на страницу в первую очередь. Я использую теги HTML В моей демонстрации внутри нижнего колонтитула показано изображение летучей мыши для не слишком пугающего эффекта, но вы можете выбрать любое другое изображение, которое вам нравится. Лорем ипсум долор сит амет… Переход на CSS, удалить любое пространство вокруг Дайте некоторые размеры ( Применить Цвет обоих Установить Таким образом, внизу будет достаточно места для нижнего колонтитула быть видимым когда пользователь прокручивает страницу вниз. Вот и все. Эффект раскрытия нижнего колонтитула для полной веб-страницы готов. Посмотрите демоверсию Codepen ниже. Эту технику можно использовать для отдельного элемента HTML (с нижним колонтитулом), который довольно долго для правильного эффекта прокрутки страницы. Метод немного хакерский, так как в настоящее время он не работает в Chrome и IE, но имеет неплохой запасной вариант.. Во-первых, давайте создадим длинную статью с нижним колонтитулом. Для продвижения семантического кода я выбрал Лорем ипсум долор сит амет… Ниже вы можете увидеть базовый стиль статьи и нижний колонтитул. Моя статья в настоящее время выглядит следующим образом. Конечно, вы можете использовать и другие основные правила стиля. Предыдущий нижний колонтитул был исправлен, этот собирается быть липким. Применить Вы можете настроить его по своему вкусу, так как он определяет точку, в которой нижний колонтитул начинает появляться или исчезать, когда пользователь прокручивает вниз или вверх. Дай то же значение для нижнего поля статьи, чтобы в нижней части было достаточно места, чтобы раскрыть нижний колонтитул. Теперь нам нужно открытие рядом с нижней частью статьи через который мы можем видеть липкий нижний колонтитул, прокручивая вниз и вверх. Для этого замените Наконец, давайте поместите нижний колонтитул позади статьи с использованием И все, отдельный элемент страницы с эффектом раскрытия при прокрутке готов. Проверьте ручку Codepen ниже. Вы также можете найти оба варианта использования на нашей странице Github.. а также для семантики. тем не мение,
Продолжайте прокручивать, пока не увидите нижний колонтитул
отметить установка полей на 0, и сделать это достаточно долго добавление пользовательской высоты вызвать прокрутку (если содержание тела на вашей странице достаточно длинное, чтобы вызвать прокрутку, вам не нужно указывать его высоту).ширина а также рост) в нижний колонтитул, и исправить свою позицию в нижней части экрана с положение: фиксированное; а также низ: 0; свойства. body font-family: Crimson Text; размер шрифта: 13pt; поле: 0; нижний колонтитул ширина: 100%; высота: 200 пикселей; положение: фиксированное; низ: 0; цвет фона: # DD5632;
2. Скрыть нижний колонтитул
Z-индекс: -1 править в нижний колонтитул, чтобы поместите это позади всех других элементов на странице. а также теги белые для того, чтобы прикрыть нижний колонтитул. body, html background-color: #fff; нижний колонтитул ширина: 100%; высота: 200 пикселей; положение: фиксированное; низ: 0; цвет фона: # DD5632; z-индекс: -1;
3. Настройте нижнюю маржу
край дно из тег равна высоте нижнего колонтитула (в моем примере 200px). body height: 1000px; поле: 0; нижнее поле: 200 пикселей;
Отдельные элементы страницы
1. Создать длинную статью
а также .
Статья 1
article ширина: 500px; цвет фона: # FEF9F3; отступы: 20px 40px; article> footer height: 100px; цвет фона: # FE0178; body font-family: cormorant garamond;
2. Сделать нижний колонтитул липким
положение: липкий правило для нижнего колонтитула, так что он будет двигаться внутри границ статьи, но все же сохранить свою позицию на экране, когда пользователь прокручивает вверх и вниз. article> нижний колонтитул высота: 100px; цвет фона: # FE0178; положение: -вебкит-липкий; положение: липкое; низ: 80 пикселей;
Дно: 80px Правило фиксирует положение нижнего колонтитула 80px выше нижней части статьи. article ширина: 500px; цвет фона: # FEF9F3; отступы: 20px 40px; нижнее поле: 80px;
3. Добавьте частично прозрачный фон
фоновый цвет статьи с линейный градиент изображение на заднем плане, который от верхней части статьи до верхней части нижнего колонтитула окрашен цветом фона статьи, а оставшаяся часть снизу сделано прозрачным. article ширина: 500px; отступы: 20px 40px; background-image: линейный градиент (снизу, # FEF9F3 calc (100% - 120px), прозрачный 0); нижнее поле: 80px;
Вычислено (100% -120px) Функция CSS вычисляет полная высота статьи минус нижний колонтитул. В моем примере это 120px (100px для высоты + 20px для заполнения).
4. Поместите нижний колонтитул обратно
z-индекс: -1 Правило CSS. article> нижний колонтитул высота: 100px; цвет фона: # FE0178; положение: -вебкит-липкий; положение: липкое; низ: 80 пикселей; z-индекс: -1;
