phpjsJqueryhtmlcssblog

Прилипание элемента к краю

"position:sticky", что такое "position:sticky" и как работает прилипание элемента к краю! Разберемся с примерами как закрепить div при прокрутке !

Подробно о "position:sticky" прилипание элемента

1. "position:sticky" прилипание сверху.
2. "position:sticky" прилипание снизу

Скопировать ссылку



"position:sticky" сверху.

Начнем с того, как переводится position:sticky:


position - с английского переводится - "позиция, место, должность, поза" существительное + "позиционировать" глагол.

sticky - с английского переводится как - "липкий" прилагательное

Если "position:sticky" не работает! Скорее всего вы сделали, что-то неправильно!


Сделаем придание "position:sticky" правильно!

Чтобы реализовать прилипание position:sticky" сверху, нам понадобится несколько блоков div. Наш блок, который будет иметь на борту "position:sticky" блок:

<div class="sticky_block">sticky block</div>

Покрасим в красный, чтобы можно было его отличить от других:

border: 1px solid red;

+ естественно добавим :

position:sticky;

+ Блок будет прилипать сверху :

top:0;

Соберем css:

<style>
.sticky_block{
position:-webkit-sticky;
position:sticky;
top:0;
border:
1px solid red;
}
</style>


Далее нам выше приведенный блок с классом "sticky_block" нужно поместить в родительский блок, чтобы мы могли увидеть движение внутри блока, добавим ему также бордюр зеленого цвета, а контент бордюр будет синим, чтобы не расписывать каждую строчку, соберем весь код сразу вместе::

Css:

<style>

  .sticky_block{

  position:-webkit-sticky;

  position:sticky;

  top:0;

  border: 1px solid red;

  }

  .container{

  width:600px;

  height:300px;

  margin:0 auto;

  border:solid 1px green;

  padding:10px;

  margin-top:40px;

  }

  .content {

  border: 1px solid blue;

  }

</style>

Html:

<main class="container">

  <div class="sticky_block">sticky block</div>

  <div class="content">content</div>

</main>

Результат прилипания блока сверху.

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

Живой пример position:sticky - прилипания блока сверху.

sticky block
content
Скопировать ссылку



"position:sticky" прилипание снизу

Чем отличается прилипание снизу от прилипания блока сверху!?

Только тем, что нужно изменить позиционирование блоков.

Блок "sticky_block_1" разместим внизу родительского блока. И добавим ему прилипание снизу:

bottom:0;

собственно - это всё!

Как сделать "position:sticky прилипание снизу"

Для того, чтобы сделать прилипание к низу блока нам понадобится - опять несколько блоков div

- это будет аналогичная конструкция, что мы делали вверху, но каждому блоку добавим 1(в которых требуется изменить позиционирование и прилипание!):

<main class="container">
<div class="content_1">MAIN CONTENT</div>
<div class="sticky_block_1">sticky block снизу</div>
</main>


Стили: Меняем "top:0"

position:sticky;
top:0;

На "bottom:0;"

position:sticky;
bottom:0;

Соберем весь код прилипания блока снизу вместе:

Начнем со стилей:

css:

<style>

  .sticky_block_1{

  position:-webkit-sticky;

  position:sticky; bottom:0;

  border: 1px solid red;

  }

  .container_1{

  width:600px;

  height:300px;

  margin:0 auto;

  border:solid 1px green;

  padding:10px;

  margin-top:40px;

  }

  .content_1 {

  min-height: 273px;

  border: 1px solid blue;

  }

</style>

Html:

<main class="container">

<div class="content_1">MAIN CONTENT</div>

<div class="sticky_block_1">sticky block</div>

</main>

Прилипание элемента снизу.

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

Живой пример position:sticky - прилипания блока снизу.

MAIN CONTENT
sticky block снизу

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---