У меня есть веб-страница с фиксированным заголовком в верхней части страницы (название веб-сайта, меню и т. д.) и содержимым, имеющим подзаголовки, которые я хотел бы закрепить. Я думал о двух способах сделать это в CSS, и ни один из них не работает:
Использовать позицию: фиксированную или позицию: липкую. для заголовка страницы. Это приводит к тому, что остальная часть страницы прокручивается под заголовком страницы, поэтому ее подзаголовки не видны, когда они прикреплены. Они прикрепляются к верхней части страницы (которая находится под заголовком страницы), а не к верхней части их собственного видимого раздела.
При указании прикрепленного подзаголовка -header, я мог бы сделать top равным высоте заголовка страницы. Это устраняет липкость за счет необходимости знать высоту (в моем случае она переменная).
Еще одним недостатком этого подхода является то, что полоса прокрутки страницы простирается до заголовка страницы, а не является ограничено разделом прокрутки.
Используйте Flex, сетку или что-то еще, чтобы разбить страницу по вертикали на две части: заголовок и прокручиваемый основной раздел. . Это приводит к тому, что подзаголовки правильно прикрепляются к верхней части основного раздела, но возникает две проблемы. Во-первых, #fragments больше не работает надежно, поскольку привязки находятся внутри вложенного блока прокрутки. Вторая, более серьезная проблема, заключается в том, что она вызывает всевозможные ошибки в мобильном Safari, когда браузер пытается центрировать поля ввода текста по центру, и он делает это, заставляя прокручивать всю страницу (а не только основной раздел). Как только это произойдет, представление зависнет, и страницу придется перезагрузить, чтобы она снова правильно прокручивалась. Вот чужая ошибка StackOverflow об этой проблеме и их видео. (Эта ошибка может произойти и без вложенного элемента прокрутки, но с ним ситуация намного хуже.)
Похоже, исправлено Заголовок страницы — очень распространенная вещь, и желание закрепить подзаголовки — обычное дело, но я не могу получить и то, и другое. Я исследовал различные популярные мобильные веб-сайты (Google Docs, Reddit, StackOverflow, MDN), и все они используют вариант №1 выше и не используют прикрепленные подзаголовки.
Есть идеи по поводу как заставить работать липкие подзаголовки, не создавая собственный вложенный блок прокрутки? Или о том, как обойти ошибку прокрутки в Safari?
У меня есть веб-страница с фиксированным заголовком в верхней части страницы (название веб-сайта, меню и т. д.) и содержимым, имеющим подзаголовки, которые я хотел бы закрепить. Я думал о двух способах сделать это в CSS, и ни один из них не работает: [list] [*]Использовать позицию: фиксированную или позицию: липкую. для заголовка страницы. Это приводит к тому, что остальная часть страницы прокручивается под заголовком страницы, поэтому ее подзаголовки не видны, когда они прикреплены. Они прикрепляются к верхней части страницы (которая находится под заголовком страницы), а не к верхней части их собственного видимого раздела. При указании прикрепленного подзаголовка -header, я мог бы сделать top равным высоте заголовка страницы. Это устраняет липкость за счет необходимости знать высоту (в моем случае она переменная). Еще одним недостатком этого подхода является то, что полоса прокрутки страницы простирается до заголовка страницы, а не является ограничено разделом прокрутки.
[*]Используйте Flex, сетку или что-то еще, чтобы разбить страницу по вертикали на две части: заголовок и прокручиваемый основной раздел. . Это приводит к тому, что подзаголовки правильно прикрепляются к верхней части основного раздела, но возникает две проблемы. Во-первых, #fragments больше не работает надежно, поскольку привязки находятся внутри вложенного блока прокрутки. Вторая, более серьезная проблема, заключается в том, что она вызывает всевозможные ошибки в мобильном Safari, когда браузер пытается центрировать поля ввода текста по центру, и он делает это, заставляя прокручивать всю страницу (а не только основной раздел). Как только это произойдет, представление зависнет, и страницу придется перезагрузить, чтобы она снова правильно прокручивалась. Вот чужая ошибка StackOverflow об этой проблеме и их видео. (Эта ошибка может произойти и без вложенного элемента прокрутки, но с ним ситуация намного хуже.)
[/list] Похоже, исправлено Заголовок страницы — очень распространенная вещь, и желание закрепить подзаголовки — обычное дело, но я не могу получить и то, и другое. Я исследовал различные популярные мобильные веб-сайты (Google Docs, Reddit, StackOverflow, MDN), и все они используют вариант №1 выше и не используют прикрепленные подзаголовки. Есть идеи по поводу как заставить работать липкие подзаголовки, не создавая собственный вложенный блок прокрутки? Или о том, как обойти ошибку прокрутки в Safari?
Мобильная версия