Как сделать плавающий блок который появляется из верхней части сайдбара?

Question

[Senseich]

Всем привет! Нашел много примеров в интернете, но они в основном как сделать плавающий блок, когда до него докручиваешь. Я немного запутался, помогите правильно реализовать следующее:

К примеру есть правая колонка - сайдбар. В ней сверху находится БЛОК-1 (с рекламой),
потом к примеру БЛОК-2 и БЛОК-3

Мне надо, чтобы когда посетитель проскролил БЛОК-3 появился БЛОК-1 (с рекламой) и стал плавающим.

Можете пример дать?

Answer 1

[Максим Тимофеев]

position: sticky;
https://developer.mozilla.org/ru/docs/Web/CSS/position

Comments

[Senseich]

только IE не поддерживает

[Максим Тимофеев]

Senseich,
для браузеров которые такое не кушают делаем так:

position: static;
position: sticky;

[Senseich]

Максим Тимофеев, а как это сработает не понятно, static это же по умолчанию значение

[Максим Тимофеев]

Senseich, https://habr.com/company/wargaming/blog/245997/

[Senseich]

Максим Тимофеев,

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

Мне нужно чтобы везде работало