Як зробити, щоб блок при прокручуванні залипає у верхньої межі вікна браузера

Залишається Яваскрипт. Відстежуємо позицію блоку щодо краю браузера, віднімаючи позицію скрол з відстані між блоком і краєм сторінки. Коли ця позиція досягає порогового значення, клонуємо блок, приховуємо, але не прибираємо з потоку оригінал блоку, а поверх показуємо заліпшіе завдяки position: fixed клон.

Це не все. Клону потрібно скриптом повідомляти ширину оригінального блоку, тому що фіксед-блок випадає з контексту і визначає свої розміри щодо вікна, а не блоку-батька. І ще треба не забути про горизонтальну вісь, щоб якщо раптом з'явиться горизонтальна прокрутка, заліпшіе блок рухався вліво-вправо за своєю колонкою.

Якщо все вийде, буде не важко додати кілька рядків і зробити щось на зразок айфоновского тейбл-в'ю. коли один блок відштовхує інший:

• Алевтина
• Олександра
• Олена
• Аліна
• Аліса
• Алія
• Алла
• Алсу
• Альбіна
• Анастасія
• Ангеліна
• Анжеліка
• Ганна
• Антоніна
• Аріна
• Ася

• Валентина
• Валерія
• Варвара
• Василиса
• Віра
• Вероніка
• Вікторія
• Віолетта
• Віталія
• Владислава

• Єва
• Євгенія
• Катерина
• Олена
• Єлизавета

Моя версія скрипта:

Користуйтеся. Щоб зробити простий залипающий блок, як виноска справа, додайте клас stickyeah.

Налаштуйте відступ до верху браузера атрибутом data-stickyeah -offset.

Щоб якось змінити зовнішній вигляд заліпшіе блоку, вкажіть будь-який клас в data-stickyeah -class:

Щоб блоки відштовхували один одного, як з іменами вище, об'єднайте їх в групу за значенням data-stickyeah -push.

На сторінці може бути кілька таких груп, задайте кожної свій ідентифікатор data-stickyeah -push.

Якщо position: fixed не підтримується, його можна емулювати через position: absolute і додаткову арифметику. Але я вирішив не обтяжувати свій сценарій, залипання - допоміжна опція, що не впливає на доступність контенту і можливість зробити покупку.

В Ай ОС е слабка підтримка position: fixed - перерахунок стилів відбувається тільки після відриву пальця від екрану.

блок