Как сделать плавающую кнопку на сайте html

Обновлено: 08.07.2024

ReactJS - библиотека для построения пользовательских интерфейсов. Она основана на концепции компонентов - независимых строительных блоков интерфейса.

В данном примере я покажу Вам как просто можно сделать переиспользуемый React-компонент плавающей кнопки.

Плавающая кнопка - это такой элемент интерфейса пользователя, который располагается, как правило, в одном из крайних углов видимой области экрана устройства, не меняет своего положения при прокрутке страницы и служит для выполнения некоторых действий. Особенно такой элемент распространен на Android-смартфонах, но и на веб-страницах он тоже встречается часто.

Сначала CSS-код (файл FloatingButton.css):

.FloatingButton /** базовый размер кнопки */
--button-size: 48px;

/** позиция элемента относительно нижнего правого угла */
--button-position: 15px;

position: fixed;
display: flex;
justify-content: center;
align-items: center;
right: var(--button-position);
bottom: var(--button-position);
width: calc(var(--button-size) + 4px);
height: var(--button-size);
border-radius: 50%;
background: rgb(55, 160, 14);
color: rgb(255, 255, 255);
font-size: 2.5rem;
padding-bottom: 6px;
padding-left: 1px;
cursor: pointer;

/**
для того, чтобы кнопка не перекрывалась любым другим элементом страницы,
при необходимости можно увеличить
*/
z-index: 1000;

/** не позволят выделять содержимое кнопки для копирования */
user-select: none;

box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.5);
>

/**
при наведении курсора мыши делаем кнопку немного прозрачной
*/
.FloatingButton:hover opacity: 0.85;
>

Подскажите, пожалуйста, как сделать кнопку "онлайн-консультант" так, чтобы эта кнопка всегда находилась слева и не проматывалась вместе со страницей, а как бы "плавала" за окном или просто находилась на фиксированном месте (x:1 y:1).

1 ответ 1

Я пробовал, но IE почему-то показывает ее неправильно. Причем не только у меня. Chrome и Firefox - отлично, а IE просто вставляет рисунок в том месте, где написан код. Что еще посоветуете?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css или задайте свой вопрос.

Как сделать кнопку без jQuery

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

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

Это позволит выполнить скрипт после загрузки всей страницы. Не помогло? Пиши в комментариях и постараемся найти проблему вместе.

Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу (тизеры, баннеры или контекст).

Рекламу Adsense помещать в фиксированный блок нельзя.

Увы, правила адсенса нам это запрещают. Тем не менее, многие владельцы сайтов игнорируют правила на свой страх и риск. Может быть, их за это даже не наказывают, но я бы не советовал рисковать.

Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.

Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.

Самый рабочий способ

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

Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).

В желаемом месте боковой колонки вставляем такой HTML-код:

div class = "sticky-block" >
div class = "inner" >
Здесь вставляем тот код, который должен двигаться.
/ div >
/ div >

Далее создаем файл fixads.js и прописываем в него:

$ ( window ) .scroll ( function ( ) <
var sb_m = 20 ; / * отступ сверху и снизу * /
var mb = 300 ; / * высота подвала с запасом * /
var st = $ ( window ) .scrollTop ( ) ;
var sb = $ ( ".sticky-block" ) ;
var sbi = $ ( ".sticky-block .inner" ) ;
var sb_ot = sb.offset ( ) .top;
var sbi_ot = sbi.offset ( ) .top;
var sb_h = sb. height ( ) ;

if ( sb_h + $ ( document ) .scrollTop ( ) + sb_m + mb ( document ) . height ( ) ) <
if ( st > sb_ot ) <
var h = Math.round ( st - sb_ot ) + sb_m;
sb.css ( < "paddingTop" : h >) ;
>
else <
sb.css ( < "paddingTop" : 0 >) ;
>
>
> ) ;

В этом коде можно задать отступы сверху, снизу, а также высоту вашего подвала, т.е. ту высоту, на которой блоку нужно остановиться.

Теперь подкключаем JS. Для этого прописываем в секции HEAD:

Самый простой способ (для WordPress)

Также безотказный метод, но при помощи установки плагина Q2W3 Fixed Widget (Sticky Widget). Работает без косяков.

Достоинства:

не нужно разбираться/понимать HTML;
простота и скорость установки.

Недостатки:

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

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

Другие способы реализации скользящих блоков

Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.

В сайдбар вставляем:

Прописываем стили в HTML (лучше добавить сразу в CSS):

style >
.sticky <
position: fixed;
z-index: 101 ;
>
.stop <
position: relative;
z-index: 101 ;
>
/ style >

Читайте также: