Простой способ сделать плавающий блок меню или рекламы на чистом CSS.

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

В данной статье хочу рассказать о возможности сделать плавающий блок в боковой панели без использования 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.