Skip to main content
7 de 9
se eliminaron 186 caracteres en el cuerpo
user avatar
user avatar

¡Bienvenido a stackoverflow!

Te expongo un ejemplo muy sencillo que puedes probar. Personalmente considero que el código queda más estructurado realizando el control con una función específica a modo de toggle(activado | desactivado).

El ejemplo consiste en un contenido web de 3 cajas con un alto aproximado de 3000px, para que se pueda probar en pantalla completa. El background comienza en rojo y una vez sobrepasas el breakpoint "punto de rotura" o marcado, en este caso en 500px, cambia a verde, y de vuelta al regresar se torna rojo de nuevo. He agregado de forma adicional un console.log para facilitar la comprensión del scroll y el píxel en el que se encuentra.

$(document).ready(() => {
  const breakpoint = 500;
  $(window).scroll(() => toggleActionByBreakpoint(breakpoint));

  function toggleActionByBreakpoint(breakpoint) {
    const currentScrollPos = $(this).scrollTop();
    console.log(currentScrollPos);

    const isScrollOverPos = currentScrollPos > breakpoint;
    const isScrollUnderPos = currentScrollPos < breakpoint;

    if (isScrollOverPos) $("body").css('background-color', 'green');
    if (isScrollUnderPos) $("body").css('background-color', 'red');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Action on scroll position</title>
</head>
<body style="background-color: red;">
  <div id="separator" style="margin-top: 500px;"></div>
  500px
  <div id="separator" style="margin-top: 500px;"></div>
  1000px
  <div id="separator-2" style="margin-top: 100px;margin-bottom: 50px;"></div>
  1100px
  <div id="position-to-detect" style="margin-top: 50px;margin-bottom: 2000px;"></div> 
  1150px
  </body>
</html>

Como he visto que haces uso de Jquery, aprovechemos esta librería para un código mas sencillo y rápido, en caso que neceistes que sea si o si en Javascript, creo que es facil adaptarlo, si te ves con problemas comenta y enriquecemos la respuesta, al final JQuery es azucar sintáctico.

user42165