Домашня » Кодування » Як створити CSS-Sticky Footer

    Як створити CSS-Sticky Footer

    Як правило, нам потрібен JavaScript виконувати ефекти прокручування пов'язані з різними діями користувачів на веб-сторінках. Сценарій виконує завдання відстеження того, як прокрутка вгору або вниз займає сторінку, і викликає дію при досягненні порогової висоти.

    Не дуже погано використовувати JavaScript для прокручування ефектів. Фактично є більш складні випадки неможливо вирішити без JavaScript. Однак є CSS хакі які іноді можуть замінити ці сценарії.

    Цей пост буде показувати вамw для створення ефектів нижнього колонтитула на сторінці прокрутки за допомогою CSS. Ми будемо використовувати два випадки використання, щоб продемонструвати це: один для всієї сторінки (див. Демонстрацію) і один для окремих елементів сторінки, наприклад для статей.

    Повна сторінка

    Нам потрібно створити нижній колонтитул відображається з-під сторінки поки користувач прокручується вниз. Крім того, коли вони прокручують сторінку резервного копіювання до нижнього колонтитула, потрібно бути прихованим знову під сторінкою.

    Для досягнення цієї мети спочатку треба створити a колонтитул з фіксованою позицією у нижній частині екрана.

    1. Створіть фіксований нижній колонтитул

    Давайте додати певний вміст і нижній колонтитул спочатку на сторінці. Я використовую HTML-теги

    і
    для семантики. Однак,
    працює також.

    У моїй демонстраційній версії зображення біта, показаного в нижньому колонтитулі для не дуже привидного ефекту, але ви можете вибрати будь-яке інше зображення.

     

    Тримайте прокрутку, поки не побачите колонтитул

    Lorem ipsum dolor sit amet…

    Перехід до CSS, видалити будь-який простір навколо тег від встановлює поля 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; 

    Це воно. Ефект відкриття нижнього колонтитула для повної веб-сторінки виконано. Ознайомтеся з наведеним нижче кодом Codepen.

    Елементи окремих сторінок

    Цей метод може бути використаний для окремого елемента HTML (з нижнього колонтитула) достатньо довго для правильного ефекту прокрутки сторінки. Метод трохи поганий, так як він в даний час не працює в Chrome і IE, але він має гідний запасний варіант.

    1. Створити довгу статтю

    По-перше, створимо довгу статтю з нижнього колонтитула. Для просування семантичного коду я вибрав

    і
    .

     

    Стаття 1

    Lorem ipsum dolor sit amet…

    Нижче ви можете побачити основний стиль статті та колонтитула.

     ширина: 500px; фоновий колір: # FEF9F3; заповнення: 20px 40px;  стаття> колонтитул висота: 100px; фоновий колір: # FE0178;  body font-family: баклан garamond;  

    Моя стаття наразі виглядає так. Звичайно, ви можете використовувати й інші основні правила стилю.

    Стаття з Footer - Basic Styling
    2. Зробіть нижній колонтитул липким

    Попередній нижній колонтитул був зафіксований бути липким. Застосувати положення: липке Правило до нижнього колонтитула, так що він буде рухатися в межах статті, але все ж зберегти свою позицію на екрані, коли користувач прокручує вгору і вниз.

     стаття> колонтитул висота: 100px; фоновий колір: # FE0178; положення: -вебкіт-липкий; положення: липке; знизу: 80px;  

    The знизу: 80px Правило фіксує положення колонтитула 80px над нижньою частиною статті.

    Ви можете налаштувати його значення на свій смак, оскільки він визначає точку, де початок колонтитула з'являється або зникає, коли користувач прокручується вниз або вгору.

    Дайте Те ж значення для нижнього поля статті, так що на дно буде достатньо місця, щоб відкрити весь колонтитул.

     ширина: 500px; фоновий колір: # FEF9F3; заповнення: 20px 40px; margin-bottom: 80px; 
    3. Додайте частково прозорий фон

    Тепер нам потрібно відкриття внизу статті через які ми можемо бачити липкий нижній колонтитул, що прокручується вниз і вгору.

    Для цього необхідно замінити Колір фону статті з лінійний градієнт фонове зображення, яка від верхньої частини статті до верхньої частини нижнього колонтитула кольорові з фоном статті, а решта частини донизу зробив прозорим.

     ширина: 500px; заповнення: 20px 40px; background-image: лінійний градієнт (донизу, # FEF9F3 calc (100% - 120px), прозорий 0); margin-bottom: 80px;  

    Thecalc (100% -120px) Функція CSS обчислює повна висота статті мінус колонтитул. У моєму прикладі це 120px (100px для висоти + 20px для заповнення).

    Стаття з лінійно-градієнтним фоновим зображенням та липким колонтитулом
    4. Помістіть колонтитул назад

    Нарешті, давайте розмістіть нижній колонтитул за статтею за допомогою z-індекс: -1 Правило CSS.

     стаття> колонтитул висота: 100px; фоновий колір: # FE0178; положення: -вебкіт-липкий; положення: липке; знизу: 80px; z-індекс: -1; 

    І ось і все, окремий елемент сторінки з ефектом відкриття за допомогою прокрутки зроблено. Перевірте ручку Codepen нижче. Ви також можете знайти обидва випадки використання на нашій сторінці Github.