"Липка" бібліотека stickyfill.

Хочете зробити красиву сторінку продажу товару або послуги? Думаю, вам сподобається бібліотека stickyfill.

Відео: Цукерки з Америки для Дітей Candy CHALLENGE Lots of Candy Chuppa Chups Lollipops Candy Sweets Gummy

Знайти вихідні бібліотеки ви можете тут, а подивитися демонстрацію тут.

У демонстрації ви можете бачити, що це досить цікавий ефект, який дуже добре впишеться в опис якого-небудь товару або послуги. Якщо вам потрібні старі IE, то це, напевно, буде єдиним мінусом цієї бібліотеки, тому що підтримка IE починається тільки з 9 версії.

Встановлюється бібліотека просто. Завантажуєте скрипт, підключаєте на сторінку. Пишете наступний код:

var stickyElements = document.getElementsByClassName(`Sticky`) - 
 
for(var i = stickyElements.length -1- i gt; =0- i--){ 
Stickyfill.add(stickyElements[i]) - 
}

Або такий, якщо використовуєте JQuery:

$(`.sticky`).Stickyfill() -

CSS:

Відео: Шоколадні Мандарини Цукерки Щенячий Патруль і Minions Багато солодощів з Америки Відео для Дітей

.sticky { 
 position:-webkit-sticky- 
 position: sticky- 
 top:0- 
}

Також варто мати clearfix:

.sticky:before, 
.sticky:after { 
 content:``- 
 display: table- 
}

Детальніше про методи бібліотеки ви можете почитати за посиланням на початку статті.

Всім дякую за увагу!

Поділися в соціальних мережах:

Схожі