Um usuário perguntou 👇
Oi, estou tentando usar um código w3school simples que me permite ocultar minha barra de navegação enquanto percorro o site.
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("masthead").style.top = "0";
} else {
document.getElementById("masthead").style.top = "-150px";
}
prevScrollpos = currentScrollPos;
}
</script>
O problema é que quando o controle deslizante inteligente 3 é carregado, a barra de navegação é redefinida e funciona como na rolagem, então define o css como “top=-150px”…
Quando tento testar o site sem um controle deslizante inteligente, o estilo da barra de navegação oculta funciona perfeitamente.
Existe algum tipo de conflito aqui?
(@nextendweb_gabor)
1 ano, 3 meses atrás
Olá @nicofanjul!
O problema que você vê surge porque alguns cálculos exigem que disparemos o evento de rolagem da página, que aciona seu código, exatamente quando você está no topo da página, esta parte do código:
prevScrollpos > currentScrollPos
tem os seguintes valores:
0 > 0
falhando e em vez de top: 0, -150px é usado. Você ainda precisa modificar seu código para o valor superior 0, quando estiver no topo da página:
if (prevScrollpos > currentScrollPos || currentScrollPos == 0) {
e deve ficar bom!
Todos juntos:
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos || currentScrollPos == 0) {
document.getElementById("masthead").style.top = "0";
} else {
document.getElementById("masthead").style.top = "-150px";
}
prevScrollpos = currentScrollPos;
}
</script>
lançador de tópicos
(@nicofanjul)
1 ano, 3 meses atrás
Obrigado, isso resolveu o problema até agora.
(@jcfromkc)
11 meses, 3 semanas atrás
Obrigado!! Isso também funcionou para mim.
Isto foi útil?
0 / 0