Pessoal, estou desenvolvendo um site em HTMLe CSS. Pretendo inserir JavaScript também, mas por enquanto estou fazendo somente o básico do projeto. O projeto consiste em um site de página única. Na navbar, o usuário é direcionado à section correspondente ao menu selecionado. Por exemplo: ao clicar em "Sobre Nós", o usuário é levado até a section da página que contém o conteúdo correspondente. Para melhorar a experiência do usuário e deixar a navegação mais visualmente agradável, estou utilizando o Smooth Scroll no CSS. O problema é que o scroll não está respeitando o topo da section, levando o usuário para o meio da section e cortando o topo do conteúdo. Existe algum jeito de arrumar isso? Vou precisar usar JavaScript?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas
respostas
[Dúvida] Smooth Scroll da Navbar não respeita o topo da section
Bom dia Ana, tudo bem ?
Existem algumas maneiras de fazer isso. Uma delas é adicionando uma propriedade css chamada scroll-margin-top. Essa propriedade cria uma margin-top quando fizer o scroll para a seção desejada. Por exemplo um scroll-margin-top = 20px na seção sobre nós, vai criar uma margin-top de 20 px quando ela for selecionada.
Bom dia, Ezequiel! Usando essa propriedade o problema não foi resolvido. Esqueci de detalhar que a navbar do projeto fica fixa no topo da página para facilitar a navegação. Será que isso está interferindo?
solução!
Aí você precisa descontar o valor da sua nav. Se sua navbar tiver um height de 80px por exemplo, no scroll-margin-top da seção sobre-nos você precisa por o valor que quer somado com o height da navbar. Se você for colocar 20px, vai ficar scroll-margin-top: 100px que é os 20 mais 80 da navbar.
Perfeito! Agora funcionou. Muito obrigada!
Que bom que deu certo Ana. Fico feliz em ajudar. Qualquer dúvida estou à disposição. Bons estudos !!