Como construir comportamento barra lateral pegajosa de rolagem semelhante ao Facebook alimentação barra lateral

votos
0

Eu estou trabalhando na construção de comportamento barra lateral pegajosa que vai correr ao lado de uma alimentação vertical que é muito semelhante a um feed do Facebook na web desktop. position: stickyfunciona bem para o caso de uso fácil, onde a barra lateral é mais curto do que a altura da janela. No entanto, se sua barra lateral é maior do que a janela de exibição as necessidades da barra lateral para ter algum mecanismo de rolagem para que você possa ver o fundo da barra lateral como você rolar a alimentação.

Eu estou tentando recriar o facebook barra lateral pegajosa rolagem aqui.

A melhor maneira de entender o comportamento desejado é para testar seu feed facebook e diminuir sua altura da tela para que o seu visor é menor do que a sua altura da barra lateral. Vou tentar resumir aqui:

Quando seu visor é mais alto do que sua barra lateral (caso simples)

  1. A barra lateral se comporta exatamente como você esperaria com a posição: pegajoso. As estadias barra lateral no mesmo lugar e segue como você rolar para baixo e para cima.

Quando seu visor é menor do que sua barra lateral

  1. Quando você rolar para baixo inicialmente os pergaminhos da barra lateral com a alimentação (eles aparecem fixo juntos)
  2. Quando você chegar ao fundo da barra lateral, então ele trava na parte inferior e como você rolar para baixo mais, a barra lateral agora aparece pegajosa com o fundo fixo
  3. Quando você agora rolar para cima, a barra lateral, mais uma vez aparece ligado a seu feed principal, e desloca-se com a alimentação principal. Depois de bater o topo da barra lateral é então pegajosa com a parte superior fixa.
  4. Assim, entre estes dois estados (topo fixo ao deslocar-se, parte inferior fixa ao rolar para baixo), os rolos da barra lateral em uníssono com a alimentação principal.

É uma experiência de rolagem muito bom, mas muito difícil de recriar.

Eu realizei os estados listados nos passos 1-3 acima aplicando posição pegajosa com uma topposição, e quando você rolar para baixo, usando eventos de rolagem e alguns viewport / cálculos altura da barra lateral para determinar a diferença de altura e ajustar o topvalor css por isso bloqueia quando o fundo está alinhado com a tela (basicamente initialTop - (sidebarHeight - viewportHeight). Eu não consigo descobrir os passos 4 e 5. o melhor que eu podia fazer era transição entre os dois topvalores, dependendo da sua direção de deslocamento, mas é um muito mau UX.

Eu tenho um exemplo sandbox de um layout aqui: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Há um layout básico com 2 colunas (barra lateral esquerda e alimentos para animais principal). E há uma reagem componente chamado StickyScrollque envolve a coluna e tem toda a lógica para atualizar o topvalor. Isso pode ser um começo completamente errado para uma boa solução, mas qualquer ajuda é muito apreciada.

Publicado 13/02/2020 em 21:51
fonte usuário
Em outras línguas...                            

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