Як створити фіксовану кнопку на сайті

Надійшло запитання від одного з передплатників: «Як створити фіксовану кнопку на сайті, схожу на цю?»

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







Найчастіше такі кнопки прикріплюють до однієї зі стінок (правої або лівої) сайту.

Давайте зараз розглянемо той код, який потрібно додати на свої веб-сторінки, щоб ця кнопка з'явилася і почала працювати.

Ось той код, який потрібно розмістити на свою веб-сторінку:

Я розмістив його перед закриває тегом . Якщо ви використовуєте шаблон wordpress, то це можна зробити в файлі footer.php вашої теми.

Що собою являє цей код?

Усе. За HTML частини ми закінчили.







Тепер залишається тільки за допомогою засобів CSS, зробити цей блок фіксованим.

Ось той код, який для цього необхідний.

Його потрібно додати в файл стилів, який у вас використовується. Наприклад, style.css.

z-index: 2 - необхідний для того, щоб на невеликих моніторах кнопка розташовувалася поверх основного тексту.

Основний ефект досягається за рахунок застосування властивості position: fixed, яке робить блок фіксованим і завданням точного місця розташування блоку (top: 0px; left: 0px;).

От і все. Як бачите, використовується мінімальна кількість коду.

До речі, якщо вам буде цікаво, я займаюся налаштуванням систем веб-аналітики для сайтів (Яндекс Метрика і Google Analytics).

Як створити фіксовану кнопку на сайті

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

За допомогою інструменту «Цілі» ви можете добитися добрих результатів в цій справі. Детальніше тут.







Схожі статті