два стану
Як і в більшості хороших прийомів, тут мало чогось незвичайного. Все, що нам необхідно зробити, це продумати (і створити дизайн) два можливих стани:
Поле пошуку при прокручуванні сторінки
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Поле пошуку зафіксовано в шапці сторінки
Ми перемикається між ними, просто міняючи ім'я класу. І немає нічого поганого в тому, що у нас буде два поля пошуку, які відображаються тільки при виконанні певного сценарію. Це навпаки добре, тому що ми не хочемо займатися складними обчисленнями для їх синхронізації. Набагато легше управляти тільки одним елементом.
перше стан
(Я збираюся використовувати тут SCSS, тому що для управління станами добре використовувати вкладеність елементів).
другий стан
За умови, що ми додали клас .fix-search до батьківського елементу.
перемикання станів
Ось і все, що потрібно для перемикання між двома станами, які ми позначили. Якщо сторінка була прокручена вниз на 147 пікселів і більше, елементу буде призначений заданий клас. Якщо цього не відбувається, то і клас не призначається. Навіть якщо ви перейдіть вниз, а потім повернетеся назад, то клас сам віддалиться (бо ця невелика функція викликається при кожній події прокрутки).
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Налаштування обмежень
Дотримуючись загальної традиції, коли мова заходить про налаштування обмежень при прокручуванні (всякий раз, коли в демо-прикладі відбувається зв'язування якоїсь події з подією прокрутки), потрібно сказати наступне: вам слід подумати про налаштування обмежень. коли ви пов'язуєте функцію з подіями прокрутки, тому що якщо ви цього не зробите, то функція буде викликатися незліченну кількість разів, і може працювати дуже повільно.
Це якраз те, що було б здорово зробити на чистому CSS. Мені в голову ще поки не прийшло ніяких грандіозних рішень, але я не перестаю дивуватися тим приголомшливим речей, які роблять інші люди на CSS, тому якщо мені що-небудь прийде в голову, я обов'язково оновлю дану статтю. Можливо, одного разу ми зможемо управляти прокруткою за допомогою медіа-запитів?
Підтримка фіксованого позиціонування
Зверніть увагу, що цей демо-приклад спирається на фіксоване позиціонування, яке має неміцну репутацію в області створення макетів під мобільні пристрої. У той час як я схиляюся до того, що воно має «досить хорошу» підтримку в даний час, вибір все одно залишається за вами. Читання по темі:
Сайт Can I Use ... про фіксований позиціонуванні
Це тільки один приклад (не підходящий, зокрема, для повсюдного використання)
Можливо, використання якої-небудь з версій плагіна waypoints (або самої ідеї) дозволить створити більш стійке рішення.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
