Фіксація вмісту після прокручування

25

Від автора: Один з моїх читачів прислав мені GIF-картинку, яка демонструє класний ефект, створений Google для мобільних пристроїв (Ймовірно так відображається домашня сторінка в браузері Chrome пристрої на платформі Android?). У центрі сторінки розміщене поле пошуку (тег input з типом search), яке починає прокручуватися разом зі сторінкою, але при прокрутці в зворотному напрямку, пошук знову розміщується в шапці сторінки. Давайте розберемо цю ситуацію, оскільки ви знаєте…

Це класний ефект, особливо для поліпшення користувацького досвіду взаємодії, але не для закріплення якогось невиразного настирливого оголошення. Ось та сама GIF-картинка, яку я взяв за основу. Виглядає трохи стрімкі, але сама ідея, сподіваюся, зрозуміла:

Фіксація вмісту після прокручування

Два стани

Як і в більшості хороших прийомів, тут мало чогось незвичайного. Все, що нам необхідно зробити, це продумати (і створити дизайн) два можливих стани:

Поле пошуку при прокручуванні сторінки

Поле пошуку зафіксовано в шапці сторінки

Ми перемикаємося між ними, просто змінюючи ім’я класу. І немає нічого поганого в тому, що у нас буде два поля пошуку, які з’являються тільки при виконанні певного сценарію. Це навпаки добре, оскільки ми не хочемо займатися складними обчисленнями для їх синхронізації. Набагато легше управляти тільки одним елементом.

Перше стан

Фіксація вмісту після прокручування

(Я збираюся використовувати тут SCSS, тому що для керування станами добре використовувати вкладеність елементів).

.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
}
.search { /* Контейнер на випадок, якщо нам знадобиться ще що-небудь крім поля пошуку */
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
transition: width 0.2 s;
-webkit-appearance: none; /* Autoprefixer тут не спрацьовує */
}
}
.top {
height: 250px; /* Простір для пошуку */
padding-top: 40px;
position: relative;
}

Другий стан

Фіксація вмісту після прокручування

За умови, що ми додали клас .fix-search до батьківського елементу.

.top-header {

.fix-search & {
background: #eee;
}
}
.search { /* Контейнер на випадок, якщо нам знадобиться ще що-небудь крім поля пошуку */

.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

Перемикання станів

Фокус полягає в тому, щоб додати клас у потрібний момент. У нашому невеликому демо-прикладі, ми можемо протестувати весь процес і з’ясувати, коли настає потрібний момент, а потім безпосередньо прописати це в скрипті на JavaScript, спостерігаючи за прокруткою. Запис у стилі jQuery:

var wrap = $(«#wrap»);
wrap.on(«scroll», function(e) {
if (this.scrollTop > 147) {
wrap.addClass(«fix-search»);
} else {
wrap.removeClass(«fix-search»);
}
});

Ось і все, що потрібно для перемикання між двома станами, які ми позначили. Якщо сторінка була прокручена вниз на 147 пікселів і більше, елементу буде призначений заданий клас. Якщо цього не відбувається, то й клас не призначається. Навіть якщо ви прокрутіть сторінку вниз, а потім повернетеся назад, то клас сам вийде (бо ця невелика функція викликається при кожній події прокрутки).

Налаштування обмежень

Дотримуючись загальної традиції, коли мова заходить про налаштування обмежень при прокрутці (всякий раз, коли в демо-прикладі відбувається зв’язування якоїсь події з подією прокрутки), потрібно сказати наступне: вам слід подумати про налаштування обмежень, коли ви пов’язуєте функцію з подіями прокрутки, тому що якщо ви цього не зробите, то функція буде викликатися незліченну кількість разів, і може працювати дуже повільно.

CSS

Це як раз те, що було б здорово зробити на чистому CSS. Мені в голову не прийшло ніяких грандіозних рішень, але я не перестаю дивуватися тим приголомшливим речей, які роблять інші люди на CSS, тому якщо мені що-небудь прийде в голову, я обов’язково оновлю дану статтю. Можливо, одного разу ми зможемо керувати прокруткою з допомогою медіа-запитів?

Підтримка фіксованого позиціонування

Зверніть увагу, що цей демо-приклад спирається на фіксоване позиціонування, яке має неміцну репутацію в області створення макетів під мобільні пристрої. У той час як я схиляюся до того, що воно має «досить хорошу підтримку в даний час, вибір все одно залишається за вами. Читання по темі:

Сайт Can I Use… про фіксований позиціонуванні

Фіксоване позиціонування в мобільних браузерах (автор: Brad Frost)

Проблеми з фіксованим позиціонуванням і прокруткою на iOS (автор: Remy Sharp)

Це тільки один приклад (не підходить, зокрема, для повсюдного використання)

У цьому демо-прикладі використовується багато магічних чисел. Всякий раз, коли ви задаєте параметри висоти, у вашому мозку має спрацьовувати попередження. Це не означає, що цього ніколи не слід робити. Просто це означає, що ви повинні передбачити можливі наслідки. У цьому демо-прикладі, якщо відцентрувати зображення зміниться по висоті, то макет буде виглядати в будь-якому разі досить дивно. Ця верстка дійсно не є самою гнучкою і прощає помилки. Навіть якщо ви поправите шапку сторінки, щоб вона виглядала добре, після зміни стану, то в JavaScript є відповідні «магічні числа» на той випадок, коли потрібно буде змінити стан.

Можливо, використання будь-якої з версій плагіна waypoints (або самої ідеї) дозволить створити більш стійке рішення.