Skip to main content
se eliminaron 71 caracteres en el cuerpo
Origen Enlace
user42165
user42165

¡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.

Espero que te ayude!

Saludos!

¡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.

Espero que te ayude!

Saludos!

¡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 style="margin-top: 500px;"></div>
  500px
  <div style="margin-top: 500px;"></div>
  1000px
  <div style="margin-top: 100px;margin-bottom: 50px;"></div>
  1100px
  <div 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.

Espero que te ayude!

Saludos!

se añadieron 36 caracteres en el cuerpo
Origen Enlace
user42165
user42165

¡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.

Espero que te ayude!

Saludos!

¡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.

¡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.

Espero que te ayude!

Saludos!

se eliminaron 186 caracteres en el cuerpo
Origen Enlace
user128299
user128299

¡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.

No olvides marcar la respuesta como "válida y/o resuelta si soluciona el problema con el fin de ayudar a otros a enriquecerse del contenido.

Espero que te ayude!

Saludos!

¡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.

No olvides marcar la respuesta como "válida y/o resuelta si soluciona el problema con el fin de ayudar a otros a enriquecerse del contenido.

Espero que te ayude!

Saludos!

¡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.

[Edición eliminada durante el período de gracia]
Origen Enlace
user42165
user42165
Loading
se añadieron 31 caracteres en el cuerpo
Origen Enlace
user42165
user42165
Loading
se eliminaron 30 caracteres en el cuerpo
Origen Enlace
user42165
user42165
Loading
se eliminaron 30 caracteres en el cuerpo
Origen Enlace
user42165
user42165
Loading
se añadió 1 carácter en el cuerpo
Origen Enlace
user42165
user42165
Loading
Origen Enlace
user42165
user42165
Loading