Web Development
JBlog

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

Rate this item
(1 Vote)

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

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

 

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

 

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

 

edit Last modified on Monday, 30 March 2020 11:57

Leave a comment