Як створити CSS-Sticky Footer
Як правило, нам потрібен JavaScript виконувати ефекти прокручування пов'язані з різними діями користувачів на веб-сторінках. Сценарій виконує завдання відстеження того, як прокрутка вгору або вниз займає сторінку, і викликає дію при досягненні порогової висоти.
Не дуже погано використовувати JavaScript для прокручування ефектів. Фактично є більш складні випадки неможливо вирішити без JavaScript. Однак є CSS хакі які іноді можуть замінити ці сценарії.
Цей пост буде показувати вамw для створення ефектів нижнього колонтитула на сторінці прокрутки за допомогою CSS. Ми будемо використовувати два випадки використання, щоб продемонструвати це: один для всієї сторінки (див. Демонстрацію) і один для окремих елементів сторінки, наприклад для статей.
Повна сторінка
Нам потрібно створити нижній колонтитул відображається з-під сторінки поки користувач прокручується вниз. Крім того, коли вони прокручують сторінку резервного копіювання до нижнього колонтитула, потрібно бути прихованим знову під сторінкою.
Для досягнення цієї мети спочатку треба створити a колонтитул з фіксованою позицією у нижній частині екрана.
1. Створіть фіксований нижній колонтитул
Давайте додати певний вміст і нижній колонтитул спочатку на сторінці. Я використовую HTML-теги У моїй демонстраційній версії зображення біта, показаного в нижньому колонтитулі для не дуже привидного ефекту, але ви можете вибрати будь-яке інше зображення. Lorem ipsum dolor sit amet… Перехід до CSS, видалити будь-який простір навколо Дайте деякі розміри ( Застосувати Колір обох Встановіть Таким чином у нижній частині нижнього колонтитула буде достатньо місця бути видимим коли користувач прокручує сторінку вниз. Це воно. Ефект відкриття нижнього колонтитула для повної веб-сторінки виконано. Ознайомтеся з наведеним нижче кодом Codepen. Цей метод може бути використаний для окремого елемента HTML (з нижнього колонтитула) достатньо довго для правильного ефекту прокрутки сторінки. Метод трохи поганий, так як він в даний час не працює в Chrome і IE, але він має гідний запасний варіант. По-перше, створимо довгу статтю з нижнього колонтитула. Для просування семантичного коду я вибрав Lorem ipsum dolor sit amet… Нижче ви можете побачити основний стиль статті та колонтитула. Моя стаття наразі виглядає так. Звичайно, ви можете використовувати й інші основні правила стилю. Попередній нижній колонтитул був зафіксований бути липким. Застосувати The Ви можете налаштувати його значення на свій смак, оскільки він визначає точку, де початок колонтитула з'являється або зникає, коли користувач прокручується вниз або вгору. Дайте Те ж значення для нижнього поля статті, так що на дно буде достатньо місця, щоб відкрити весь колонтитул. Тепер нам потрібно відкриття внизу статті через які ми можемо бачити липкий нижній колонтитул, що прокручується вниз і вгору. Для цього необхідно замінити The Нарешті, давайте розмістіть нижній колонтитул за статтею за допомогою І ось і все, окремий елемент сторінки з ефектом відкриття за допомогою прокрутки зроблено. Перевірте ручку Codepen нижче. Ви також можете знайти обидва випадки використання на нашій сторінці Github. і для семантики. Однак,
Тримайте прокрутку, поки не побачите колонтитул
тег від встановлює поля 0, і зробіть це досить довго додавання користувацької висоти щоб викликати прокручування (якщо вміст тіла на вашій сторінці достатньо довгий, щоб викликати прокручування, вам не потрібно надавати йому висоту).ширина і висота) до нижнього колонтитула, і зафіксуйте свою позицію у нижній частині екрана за допомогою положення: фіксований; і знизу: 0; властивості. body font-family: Crimson Text; розмір шрифту: 13pt; маржа: 0; колонтитул ширина: 100%; висота: 200px; положення: фіксований; знизу: 0; фоновий колір: # DD5632;
2. Приховати нижній колонтитул
z-індекс: -1 правило до нижнього колонтитула для того, щоб покладіть його за всі інші елементи на сторінці. і білі для того, щоб накрийте нижній колонтитул. тіло, html background-color: #fff; колонтитул ширина: 100%; висота: 200px; положення: фіксований; знизу: 0; фоновий колір: # DD5632; z-індекс: -1;
3. Відрегулюйте нижню межу
margin-bottom з тег дорівнює висоті колонтитула (у моєму прикладі 200px). тіло висота: 1000px; маржа: 0; margin-bottom: 200px;
Елементи окремих сторінок
1. Створити довгу статтю
і .
Стаття 1
ширина: 500px; фоновий колір: # FEF9F3; заповнення: 20px 40px; стаття> колонтитул висота: 100px; фоновий колір: # FE0178; body font-family: баклан garamond;
2. Зробіть нижній колонтитул липким
положення: липке Правило до нижнього колонтитула, так що він буде рухатися в межах статті, але все ж зберегти свою позицію на екрані, коли користувач прокручує вгору і вниз. стаття> колонтитул висота: 100px; фоновий колір: # FE0178; положення: -вебкіт-липкий; положення: липке; знизу: 80px;
знизу: 80px Правило фіксує положення колонтитула 80px над нижньою частиною статті. ширина: 500px; фоновий колір: # FEF9F3; заповнення: 20px 40px; margin-bottom: 80px;
3. Додайте частково прозорий фон
Колір фону статті з лінійний градієнт фонове зображення, яка від верхньої частини статті до верхньої частини нижнього колонтитула кольорові з фоном статті, а решта частини донизу зробив прозорим. ширина: 500px; заповнення: 20px 40px; background-image: лінійний градієнт (донизу, # FEF9F3 calc (100% - 120px), прозорий 0); margin-bottom: 80px;
calc (100% -120px) Функція CSS обчислює повна висота статті мінус колонтитул. У моєму прикладі це 120px (100px для висоти + 20px для заповнення).
4. Помістіть колонтитул назад
z-індекс: -1 Правило CSS. стаття> колонтитул висота: 100px; фоновий колір: # FE0178; положення: -вебкіт-липкий; положення: липке; знизу: 80px; z-індекс: -1;
