[FrontEnd] Fazer o cabeçalho fixar no topo da tela

[emanuelfranklyn]

Quando o usuário realiza o scroll qualquer pagina, o header não fica preso ao topo da página, fazendo com que o usuário tenha que subir até o topo da página para conseguir acesso aos botões de home e configurações de perfil, e outros botões colocados no header. Uma possível solução é colocar as seguintes linhas de CSS:

position: sticky;
top: 0;

Esse código faria com que o header fique preso ao topo da telai dependente do usuário descer a página ou não, enquanto faz com que no topo da página não ocorra o risco do header ficar em cima de algum conteúdo.

[ghost]

1039

[emanuelfranklyn]

Não acredito que o pull request mencionando acima tenha alguma relação com a sugestão, visto que o pull request é sobre um botão que leva o usuário para o topo da tela e esse issue sobre manter o cabeçalho (header) sempre em tela.

[aprendendofelipe]

Eu acho que fixar o header prejudica a experiência em telas pequenas.

Veja, como exemplo, o quanto pode ser perdido na visualização de uma imagem:

[Caixetadev]

Eu acho que fixar o header prejudica a experiência em telas pequenas.

Veja, como exemplo, o quanto pode ser perdido na visualização de uma imagem:

Vejo o pessoal solicitando a funcionalidade de um header fixo e uma possível solução seria a utilização do header que desaparecem quando a página é rolada para baixo e reaparecem quando há uma pequena rolagem para cima. Muitos blogs já adotaram essa prática.

aqui esta um exemplo de site que usa: https://blog.rocketseat.com.br/

[emanuelfranklyn]

Essa ideia de o header só aparecer quando você arrasta para cima a tela é realmente melhor do que somente manter ele fixo na tela a todos os momentos.

[wizdoux]

O header aparecendo atrapalha o foco onde a mídia principal é texto, com ele oculto somente o conteúdo principal aparece em tela, o que leva a uma experiencia bem mais agradável e limpa de leitura, além de o botão de "voltar ao topo" resolver esse problema da navegação de conteúdos, ele é praticamente invisível deixando o espaço de tela vazio e sem janelas desnecessárias.

[emanuelfranklyn]

Da forma como implementei no pull request mencionado (o último mencionado em aberto, e com um link para pre-visualizar como ficaria), o header só aparece quando você sobe (scrolla) a pagina para cima, e desaparece completamente quando desce a página, exatamente como os navegadores mobile se comportam com a barra de URL e abas, que só aparecem quando subindo na página e ao descer a tela eles somem, outro problema é que o botão de voltar ao topo pode causar é que você perde a posição do seu scroll para poder navegar entre páginas, ele acaba sendo mais lento de utilizar já que tem que esperar toda a animação da página subindo para poder ter acesso ao botão para voltar para a home, e justamente o fato do botão ser quase invisivel acaba não deixando muito óbvio principalmente em tela mobile que ele existe, e tem um possível fator a ser considerado, que é, a maioria dos sites usa um header fixo ou que aparece ao subir a tela, até os próprios navegadores mobile fazem isso, então fazer o usuário ter que apertar na parte inferior para esperar uma animação para ter acesso ao botão de home, acaba sendo menos intuitivo do que usar o mesmo estilo de scroll usado pelo próprio aplicativo do navegador e diversos outros sites. Sem contar que na maioria das vezes você está apenas descendo a tela para ver o conteúdo, o que faz com que o header permaneça oculto, deixando o espaço visual completamente livre para a visualização do mesmo.

[rodrigoKulb]

@emanuelfranklyn legal sua sugestão, fico muito feliz em ver a quantidade de contribuição que vem aparecendo no git do projeto tabnews.com.br. Como toda a parte de UX acaba gerando grandes polêmicas.

Gosto sempre de estudar referências (Benchmarking) do que já é aplicado no mercado com grandes players de uso global:

• Google Desk: Menu fixo porém menor
• Google Mobile: Não possui
• Youtube (Desk e Mobile): Menu fixo
• Github (Desk e Mobile): Não possuí
• Nytimes (Desk e Mobile): Menu fixo porém menor

Nesse pequeno benchmarking temos o seguinte resultado:

Tipo	Mobile	Desktop
Fixo porem menor	1	2
Fixo	1	1
Não possuí	2	1

Gostei bastante do resultado apresentado desse bench, talvez podemos seguir com uma possível implementação para desktop nesse momento e pensar novamente no mobile em breve com algumas tentativas e um estudo mais aprofundados.

O maior peso nesse bench foi o Google que acabou gerando o desempate, gosto muito de utilizar o Google como referência de navegação pois ele tem uma preocupação de não segmentar nenhum tipo de usuário, TODOS são possíveis clientes Google. jovens, idosos etc...

Lembrando que essa é apenas a minha opinião, podemos discutir mais o tema aqui nessa issue.

[emanuelfranklyn]

@rodrigoKulb achei bastante interessante esse benchmark que você fez, e gostaria de dar minha opnião, eu acho valido usar os produtos google como base, e acho que um fator importante a ser levado em consideração é onde o header é utilizado, por exemplo no google o header que seria onde a barra de busca se encontra no mobile, e não possue muita utilidade visto que ela se mantem somente na tela onde os links são exibidos, que possue um tamanho de pagina limitado e não muito grande, seria equivalente ao menu recentes e relevantes do tabnews, onde realmente acredito que a barra de header possa ficar somente no topo visto que não é necessario escrollar bastante para ir do topo ao fim da pagina, porem quando dentro dos posts em si, acho importante já que muitos posts acabam sendo altos (muito texto) ou com muitos comentarios, fazendo o tempo de ir de uma parte mais em baixo da pagina até o topo mais complicada, por exemplo no youtube que é um endless scroller é importante o menu fixo já que subir tudo é lento já que você pode estar muito para baixo no scroll, e isso é um tema que vejo bastante em varios sites, quando o site possue um conteúdo que pode apresentar uma grande quantidade de scroll o menu de navegação tende a permanecer em facil acesso do usuário, pelomenos é o que eu acredito, e sobre a preucupação de se o header fixo atrapalharia a visualização do conteúdo, acredito que a solução de somente exibir ao arrastar a pagina para cima é eficiente visto que quando arrastado para baixo a tela inteira é reservada para o conteúdo ja no mobile quando subindo o usuario verá tanto os menus do browser que aparecem ao subir a tela quanto os menus do tabnews e um simples mini arrastada para baixo faz ambos sumirem.