position: sticky теперь работает в некоторых мобильных браузерах, поэтому вы можете прокрутить строку меню вместе со страницей, но затем придерживаться верхней части области просмотра, когда пользователь прокручивает ее.
Но что, если вы хотите немного изменить стиль липкой строки меню, когда она в данный момент «застревает»? например, вы можете захотеть, чтобы полоса имела закругленные углы всякий раз, когда она прокручивается вместе со страницей, но затем, как только она прилипнет к верхней части окна просмотра, вы захотите избавиться от верхних закругленных углов и добавить небольшую тень под ними. Это.
Есть ли какой-нибудь псевдоселектор (например ::stuck
) для нацеливания элементов, которые есть position: sticky
и в настоящее время прилипают? Или у производителей браузеров есть что-то подобное в разработке? Если нет, то где мне его запросить?
NB. Решения javascript для этого не годятся, потому что на мобильных устройствах вы обычно получаете только одно scroll
событие, когда пользователь отпускает палец, поэтому JS не может знать точный момент, когда был пройден порог прокрутки.
источник
position
свойства в:stuck
селекторе следует игнорировать? (я имею в виду правило для поставщиков браузеров, аналогичное правилам о том, какleft
имеет приоритет над иright
т. д.)):stuck
что A меняетtop
значение с0
на300px
, а затем прокручивает вниз150px
... должно оно прилипать или нет? Или подумайте об элементе, в котором может быть измененоposition: sticky
иbottom: 0
где:stuck
может измениться,font-size
и, следовательно, о размере элемента (следовательно, об изменении момента, в который он долженwhile
цикл плохо спроектирован, потому что он допускает бесконечный цикл :) Однако спасибо, что прояснили это;)В некоторых случаях простое
IntersectionObserver
решение может помочь, если ситуация позволяет придерживаться пикселя или двух вне его корневого контейнера, а не должным образом смыть. Таким образом, когда он находится за краем, наблюдатель стреляет, и мы бежим.Вставьте элемент прямо из контейнера с помощью
top: -2px
, а затем нацелитесь черезstuck
атрибут ...Пример здесь: https://codepen.io/anon/pen/vqyQEK
источник
stuck
класс лучше, чем настраиваемый атрибут ... Есть ли конкретная причина для вашего выбора?padding-top: 60px
в вашем случае :)Кто-то в блоге разработчиков Google утверждает, что нашел перформативное решение на основе JavaScript с IntersectionObserver .
Соответствующий бит кода здесь:
Я сам не воспроизводил это, но, возможно, это поможет кому-то, кто споткнется в этом вопросе.
источник
Не совсем фанат использования js-хаков для стилизации вещей (например, getBoudingClientRect, прослушивания прокрутки, прослушивания изменения размера), но в настоящее время я решаю проблему именно так. Это решение будет иметь проблемы со страницами, которые имеют минимизируемое / максимизируемое содержимое (<details>), или вложенную прокрутку, или вообще какие-либо кривые шары. При этом это простое решение, когда проблема также проста.
источник
if (requestedFrame) { return; }
Это не "убийца производительности" из-за пакетной обработки кадров анимации. Однако Intersection Observer по-прежнему является улучшением.Компактный способ, когда у вас есть элемент над
position:sticky
элементом. Он устанавливает атрибут,stuck
который вы можете сопоставить в CSSheader[stuck]
:HTML:
JS:
источник