WordPress Smart Slider 3 Pergunta: Conflito ao se esconder em uma barra de navegação durante a rolagem

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.