Войти / Регистрация
Войти в свою учетную запись
Запомнить меня
Создать учетную запись
Поля, отмеченные звездочкой (*), обязательны для заполнения.
Reload Captcha
 
Идеи на практике

ARENAM

Веб разработка

Серия "Шаблоны" для тех кто любит выбирать самые простые и легкие решения для своих сайтов!

В данной статье хочу рассказать о возможности сделать плавающий блок в боковой панели без использования JavaScript, на чистом CSS. Безусловно JavaScript играет большую роль при разработке и создании сайтов и предоставляет больше возможностей, но зачем изобретать велосипед когда существуют более простые решения. В сети существуе огромное количество примеров исполнения боковых плавющих блоков на Js, есть и очень сложные с использованием несколких блоков одновременно где не обойтись без скрипта. Но я не думаю что в таких конструкциях нуждаются современные сайты хотя, сколько людей столько и мнений, а в гонке за производительностью играет роль каждый пробел)).

И так для нашего плавающего блока потребуется HTML конструкция такого вида. Это только родительский блок с плавающим внутри

 

<div class="parent">
	<div class="float">I AM A FLOAT BOX!</div>
</div>

 

И теперь все что требуется добавить, это только два стиля к плавающему блоку.

 

.float{
  position: sticky;
  top: 0;
}

Примечания: в некоторых случаях может потребоваться настройка родительского блока! Например добавление: display: block; height: 100%;

 

1. Пример простого использования. Прилепающее меню или Sticky header.

See the Pen Float box 1 by MaXX (@uilvofiw-the-scripter) on CodePen.

 

2. Пример фиксации шапки таблицы. Sticky header.

See the Pen Float box 2 by MaXX (@uilvofiw-the-scripter) on CodePen.

 

3. Пример боковой панели. Float box.

See the Pen Float box 3 by MaXX (@uilvofiw-the-scripter) on CodePen.

 

Гарантии покупки

Secured payment
100% безопасные платежи с помощью банковских карт, ЮMoney, QIWI и других.
Official invoice
Вы получите официальный счет мгновенно в соответствии с законом 54-Ф3.
Instant download
Мгновенная загрузка после оплаты.