Как зафиксировать элемент при прокрутке?

Question

[Антон]

https://codepen.io/anon/pen/NQRWZj
Как пролистывая страницу, дойдя до синего блока, зафиксировать его сверху и листать дальше вниз? При прокрутке обратно вверх - открепить фиксацию обратно?

Answer 1

[Вадим Кот]

Попробуйте вот эту библиотеку https://github.com/imakewebthings/waypoints

https://codepen.io/web-tech/pen/qeaEMb

Answer 2

[Рома Зварич]

Если не нужен IE, то можно и двумя строками это сделать

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

Comments

[Антон]

Добавлю, что в Сафари не хочет это работать

[Рома Зварич]

Антон, вроде должно работать https://caniuse.com/#search=position%3A%20sticky

[Антон]

Рома Зварич, да, работает. Не обратил внимание, что в Css надо указывать -webkit-

Answer 3

[Сергей]

Попробуйте вот этот плагин: stickyjs.com

Comments

[Rustam Bainazarov]

Лучше этот:
https://dollarshaveclub.github.io/stickybits/

Он адаптивно делает: если есть поддержка нативного position: sticky, то он его применяет. Если нет, то fixed. И нет зависимости от jQuery.