JS no detecta scroll

M

MissFortune #1 Oct '21

Buenas,

Estoy realizando una página web en html+css+js y hay una función que no funciona como me gustaría.

La idea es crear una función que detecte el scroll y que la barra del navegador cambie de color cuando pase eso.

HTML:

<body>
    <div class="top-bar" id="top-bar">
      <div
        class="fixed-content top-bar-content bg-colored"
        id="fixed-content-top-bar-content"
      >
        <a class="main-page-link" href="/">
          <img
            class="logo"
            id="logo"
            src="logos/petinder_white.svg"
            alt="Petinder"
        /></a>
        <nav class="navbar">
          <ul class="nav">
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Sobre nosotros</a></li>
            <li><a href="#">Contactar</a></li>
          </ul>
        </nav>

JS:

var myNav = document.getElementById("top-bar");
window.onscroll = function () {
  "use strict";
  if (document.body.scrollTop >= 10) {
    myNav.classList.add(".nav-colored");
    myNav.classList.remove("nav-transparent");
  } else {
    myNav.classList.add("nav-transparent");
    myNav.classList.remove(".nav-colored");
  }
};

CSS:

.nav-colored {
  background-color: #000;
}
.nav-transparent {
  background-color: transparent;
}

He intentado debugear el JS y no me detecta de ninguna manera cuando hace scroll....

Alguna idea?

ReloaD1010 #2 Oct '21

Imagino que scroll de la pagina no?
if (window.scrollY >== 10)

1 respuesta

M

MissFortune #3 Oct '21

#2 Me sigue sin funcionar de la forma que tu comentas....

1 respuesta

MTX_Anubis #4 Oct '21 :psyduck:

deberías hacer algo así:


window.onscroll = function(event) {
  console.log(event.target.scrollingElement.scrollTop)
}

Suponiendo que el scroll no lo esté haciendo un componente que entonces deberías registrarlo para ese componente

eXtreM3 #5 Oct '21

Seguramente sea por esto document.documentElement.scrollTop || document.body.scrollTop , sin contar que el add y el remove de las clases lo tienes mal, le has puesto un .

https://stackoverflow.com/questions/29718833/why-window-onscroll-event-does-not-work

1 respuesta

M

MissFortune #6 Oct '21

#5 Acabo de probar esto que me comentas pero sigue sin funcionar....

var myNav = document.getElementById("top-bar");
window.onscroll = function () {
  "use strict";
  if (document.documentElement.scrollTop || document.body.scrollTop >= 50) {
    console.log("scroll");
    myNav.classList.add("nav-colored");
    myNav.classList.remove("nav-transparent");
  } else {
    myNav.classList.add("nav-transparent");
    myNav.classList.remove("nav-colored");
  }
};

He puesto un log, para ver si detecta algo pero no...

X-Crim #7 Oct '21 Moderador Mario Kart

 window.scrollY || window.pageYOffset

En serio con esto no te lo detecta?

1 respuesta

M

MissFortune #8 Oct '21

#7 Pongo lo siguiente, pero no detecta el log

var myNav = document.getElementById("top-bar");
window.onscroll = function () {
  "use strict";
  if (window.scrollY || window.pageYOffset >= 13) {
    console.log("scroll");
    myNav.classList.add("nav-colored");
    myNav.classList.remove("nav-transparent");
  } else {
    console.log("scroll");
    myNav.classList.add("nav-transparent");
    myNav.classList.remove("nav-colored");
  }
};

Voy con visual studo y con el plugin del live-server.

No se que puede ser la verdad

1 respuesta

newfag #9 Oct '21

#8 prueba a utilizar addeventlistener(scroll,function tal)

Ya dices

1 respuesta

M

MissFortune #10 Oct '21

#9 Lo he intentado con vanilla JS pero tampoco funciona:

var nav = document.querySelector("nav"); // Identify target

window.addEventListener("scroll", function (event) {
  // To listen for event
  event.preventDefault();

  if (window.scrollY <= 50) {
    // Just an example
    console.log("scroll");
    nav.style.backgroundColor = "#000"; // or default color
  } else {
    console.log("scroll");
    nav.style.backgroundColor = "transparent";
  }
});

ReloaD1010 #11 Oct '21

#3 recrea tu caso en algo como https://jsfiddle.net o https://codesandbox.io y pasa el link aqui

1 respuesta

M

MissFortune #12 Oct '21

#11 Aqui tienes

https://jsfiddle.net/missfortune/1k08qmsh/

1 respuesta

ReloaD1010 #13 Oct '21

#12 quita el height: 100vh; de .main-content {} y ya funciona

y por cierto, si haces window.scrollY || window.pageYOffset >= 13 te devolvera true cuando window.scrollY === 1 porque no lo estas comparando con ningun numero, que imagino que era tu intencion

2 1 respuesta

M

MissFortune #14 Oct '21

#13 Ya funciona!

Muchas gracias......

Me podrias decir el porque?

1 respuesta

ReloaD1010 #15 Oct '21

#14 el listener estaba en window y el contenido de la pagina nunca era mas grande que el 100% de la altura del viewport. Entonces hacias scroll sobre el div que tenia 100vh y ya.
Si quieres mantener esa regla de CSS, simplemente ponle el listener a ese div

JS no detecta scroll

Usuarios habituales

Tags