Я создаю заголовок для адаптивного сайта, а для мобильных устройств я хочу, чтобы нижнее поле поиска было скрыто пользователем. Я думаю, было бы неплохо, если бы для этого действия не требовалась выделенная кнопка, и вместо этого я хотел бы сделать это возможным с проведением вверх.
После прокрутки поле поиска уменьшится и станет иконкой для повторного вызова поля поиска при необходимости. Размах не должен мешать функционированию поля поиска - одно касание с последующим вводом текста.
Как сделать так, чтобы страница обнаруживала действие перелистывания пользователем в этой области, чтобы инициировать переходы CSS, сокращающие поле поиска?
Я искал способы сделать это, но все, что я нашел на расстоянии, было слишком сложным.
Концепция:
![image](https://i.stack.imgur.com/MEqlE.gif)