¿Cómo construir el comportamiento de desplazamiento barra lateral pegajosa similar a Facebook barra lateral alimentación

votos
0

Estoy trabajando en la construcción de la conducta barra lateral pegajosa, que funcionará una alimentación vertical que es muy similar a una fuente facebook en la web de escritorio. position: stickyfunciona bien para el caso de uso fácil en la barra lateral es más corta que la altura de la vista. Sin embargo, si la barra lateral es mayor que el área de visualización de la barra lateral a las necesidades tienen algún mecanismo de desplazamiento para que pueda ver la parte inferior de la barra lateral que se desplaza por la alimentación.

Estoy tratando de recrear el facebook barra lateral de desplazamiento pegajoso aquí.

La mejor manera de entender el comportamiento deseado es poner a prueba su feed de Facebook y reducir su altura de la pantalla para que su ventana es menor que la altura de la barra lateral. Voy a tratar de resumir aquí:

Cuando la ventana gráfica es más alta que la barra lateral (caso simple)

  1. La barra lateral se comporta exactamente como era de esperar con la posición: pegajosa. Las estancias de la barra lateral en el mismo lugar y sigue mientras se desplaza hacia abajo y hacia arriba.

Cuando su ventana es más pequeña que la barra lateral

  1. Cuando se desplaza hacia abajo inicialmente los rollos de la barra lateral con la alimentación (Aparecen fijados entre sí)
  2. Al llegar a la parte inferior de la barra lateral, entonces se bloquea en la parte inferior y que se desplaza hacia abajo más, la barra lateral ahora parece pegajosa con el fondo fijo
  3. Al desplazarse hacia atrás hasta ahora, la barra lateral una vez más aparece asociada a la alimentación principal, y se desplaza hacia arriba con la alimentación principal. Una vez que llegue la parte superior de la barra lateral es entonces pegajosa con la parte superior fijo.
  4. Así que entre esos dos estados (alto fijado al desplazarse hacia arriba, abajo fijado al desplazarse hacia abajo), los rollos de la barra lateral al unísono con la alimentación principal.

Es una experiencia de desplazamiento muy bonito, pero muy difícil de recrear.

He logrado los Estados enumerados en los pasos 1-3 de arriba, aplicando pegajosa posición con una topposición, y cuando se desplaza hacia abajo, usando eventos de desplazamiento y algunos cálculos de altura Ventana / barra lateral para determinar la diferencia de altura y el ajuste del topvalor de CSS de manera que se bloquee cuando la parte inferior está alineada con la pantalla (en esencia initialTop - (sidebarHeight - viewportHeight). no puedo averiguar los pasos 4 y 5. lo mejor que podía hacer era transición entre los dos topvalores en función de su dirección de desplazamiento, pero es una muy mala UX.

Tengo una caja de arena ejemplo de un diseño aquí: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Hay una disposición básica con 2 columnas (barra lateral izquierda y la alimentación principal). Y hay un componente llamado reaccionan StickyScrollque envuelve alrededor de la columna y tiene toda la lógica para actualizar el topvalor. Esto puede ser un comienzo completamente equivocado a una solución buena, pero cualquier ayuda es muy apreciada.

Publicado el 13/02/2020 a las 23:51
fuente por usuario
En otros idiomas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more