#javascript #angular #scroll #header #popup
#javascript #angular #прокрутка #заголовок #всплывающее окно
Вопрос:
Я не могу понять, как решить следующую проблему. На веб-сайте у меня есть липкий заголовок «показать и скрыть», который выглядит следующим образом https://stackblitz.com/github/zetsnotdead/ng-reactive-sticky-header . Заголовок содержит всплывающее меню и всплывающие результаты поиска (4 самых популярных результата кнопка «показать все»). Если разрешение экрана 1366 x 768 или меньше, этот предварительный просмотр результатов поиска не помещается на экран, а 4-й результат и кнопка «показать все» находятся за его пределами. И прокрутка вниз, как я уже сказал, скрывает весь заголовок, включая эти результаты поиска, поэтому нажать кнопку невозможно.
К сожалению, мы не следуем принципу «сначала для мобильных устройств». И весь адаптивный макет зависит от bootstrap в целом.
Итак, как я могу сделать всплывающие результаты поиска подходящими для любых разрешений экрана без добавления mediarequests? Возможно ли это? Я не могу найти никакого способа. Если требуется какая-либо дополнительная информация, я могу предоставить вам ее. Заранее прошу прощения, я здесь новичок.
Комментарии:
1. Вы можете (возможно) попытаться найти разрешение экрана с помощью javascript, а затем добавить / удалить классы на основе разрешения, которое вы нашли с помощью js, но я не рекомендую это. Кроме того, bootstrap предоставляет некоторые служебные классы для отображения / скрытия элементов в зависимости от разрешения. : v4-alpha.getbootstrap.com/layout/responsive-utilities может быть, это может указать вам правильное направление
2. Использует контейнеры начальной загрузки, строки и столбцы. Это эффективно для нескольких размеров экрана