css - nth - Posición de orientación: elementos adhesivos que se encuentran actualmente en un estado "atascado"
nth-child range (1)
posición: la función adhesiva ahora funciona en algunos navegadores móviles, por lo que puede hacer que una barra de menú se desplace con la página, pero luego se adhiera a la parte superior de la ventana siempre que el usuario se desplace por ella.
Pero, ¿y si quieres cambiar el estilo de la barra de menú un poco cuando está ''pegado''? por ejemplo, es posible que desee que la barra tenga esquinas redondeadas cada vez que se desplaza con la página, pero tan pronto como se adhiera a la parte superior de la ventana gráfica, desea deshacerse de las esquinas redondeadas superiores y agregar una pequeña sombra paralela debajo eso.
¿Hay algún tipo de pseudoselector (p. Ej., ::stuck ) para orientar los elementos que tienen position: sticky y actualmente se quedan ::stuck ? ¿O los vendedores de navegadores tienen algo así en la tubería? Si no, ¿dónde lo solicitaría?
NÓTESE BIEN. Las soluciones javascript no son buenas para esto porque en el móvil normalmente solo se obtiene un evento de scroll cuando el usuario suelta el dedo, por lo que JS no puede saber el momento exacto en que se pasó el umbral de desplazamiento.
Actualmente no hay ningún selector que se proponga para elementos que actualmente están ''atascados''. El módulo de Layout Postioned donde se define position: sticky tampoco menciona ningún selector de este tipo.
Las solicitudes de funciones para CSS pueden publicarse en la lista de correo de estilo www . Creo que una pseudoclase :stuck tiene más sentido que un pseudo-elemento ::stuck , ya que estás buscando apuntar a los elementos mientras están en ese estado. De hecho, una pseudoclase :stuck fue discutida hace un tiempo ; la principal complicación, se encontró, es una que afecta a casi cualquier selector propuesto que intenta emparejar basándose en un estilo procesado o procesado: dependencias circulares.
En el caso de una pseudoclase :stuck , el caso más simple de circularidad ocurriría con el siguiente CSS:
:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }
Y podría haber muchos más casos extremos que serían difíciles de abordar.
Aunque en general se acepta que tener selectores que coincidan en función de ciertos estados de distribución sería agradable , lamentablemente existen limitaciones importantes que hacen que estos no sean triviales para implementar. No aguantaría la respiración por una solución pura de CSS para este problema en el corto plazo.