position: sticky funciona em alguns navegadores móveis agora, então você pode fazer uma barra de menu rolar com a página, mas depois manter a parte superior da janela de visualização sempre que o usuário rolar por ela.
Mas e se você quiser dar um novo estilo à sua barra de menu fixa sempre que ela estiver 'travada' no momento? por exemplo, você pode querer que a barra tenha cantos arredondados sempre que rolar com a página, mas assim que ela aderir ao topo da janela de visualização, você deseja se livrar dos cantos arredondados superiores e adicionar uma pequena sombra embaixo isto.
Existe algum tipo de pseudo-seletor (por exemplo ::stuck
) para direcionar os elementos que estão position: sticky
e estão aderindo? Ou os fornecedores de navegadores têm algo parecido em desenvolvimento? Se não, onde eu o solicitaria?
NB. As soluções javascript não são boas para isso porque no celular você geralmente obtém apenas um único scroll
evento quando o usuário libera o dedo, então JS não pode saber o momento exato em que o limite de rolagem foi ultrapassado.
fonte
position
propriedades em um:stuck
seletor devem ser ignoradas? (uma regra para fornecedores de navegador, quero dizer, semelhante a regras sobre comoleft
tem precedência sobreright
etc)):stuck
que muda otop
valor de0
para300px
, então role para baixo150px
... deve ficar ou não? Ou pense em um elemento composition: sticky
ebottom: 0
onde o:stuck
talvez mudafont-size
e, portanto, o tamanho dos elementos (mudando, portanto, o momento em que ele deve ficar) ...while
ciclo está mal projetado porque permite um loop infinito :) No entanto, obrigado por esclarecer isso;)Em alguns casos, um simples
IntersectionObserver
pode resolver o problema, se a situação permitir aderir a um ou dois pixels fora de seu contêiner raiz, em vez de alinhá-lo adequadamente. Dessa forma, quando fica logo além da borda, o observador dispara e estamos prontos e correndo.Cole o elemento fora de seu contêiner com
top: -2px
e, em seguida, direcione por meio dostuck
atributo ...Exemplo aqui: https://codepen.io/anon/pen/vqyQEK
fonte
stuck
classe seria melhor do que um atributo personalizado ... Existe algum motivo específico para sua escolha?padding-top: 60px
no seu caso :)Alguém no blog do Google Developers afirma ter encontrado uma solução baseada em JavaScript performativa com um IntersectionObserver .
Bit de código relevante aqui:
Eu mesmo não repliquei, mas talvez ajude alguém a tropeçar nessa questão.
fonte
Não sou realmente um fã de usar js hacks para estilizar coisas (ou seja, getBoudingClientRect, ouvir rolagem, ouvir redimensionamento), mas é assim que estou resolvendo o problema. Esta solução terá problemas com páginas que possuem conteúdo minimizável / maximizável (<detalhes>), ou rolagem aninhada, ou realmente quaisquer bolas curvas. Dito isso, é uma solução simples para quando o problema também é simples.
fonte
if (requestedFrame) { return; }
Não é um "assassino de desempenho" devido ao lote de quadros de animação. O Intersection Observer ainda é uma melhoria.Uma forma compacta de quando você tem um elemento acima do
position:sticky
elemento. Ele define o atributostuck
que você pode combinar em CSS comheader[stuck]
:HTML:
JS:
fonte