Estoy tratando de hacer que el contenido de un div cambie cuando la página se desplaza hasta cierto punto usando jQuery. Actualmente, estoy tratando de lograr esto agregando una clase cuando la página se desplaza más allá de 800 y eliminándola y agregando una clase diferente cuando la página está por encima de 800. Aquí está mi código actual en jsfiddle: https://jsfiddle.net/ shgfrdm8/
Aquí está el código jQuery:
$(window).scroll(function() { let windowTop = $(window).scrollTop(); if (windowTop < 800) { $('image-content').addClass('scrolledDown'); $('image-content').removeClass('scrolledUp'); } else { $('image-content').addClass('scrolledUp'); $('image-content').removeClass('scrolledDown') } })Los ids/clases de CSS:
.main { width: 100%; height: 700px; overflow: hidden; position: relative; } .main-image { width: 100%; position: fixed; left: 50%; transform: translate(-50%) scale(500%); } .filler { height: 400vh; } .main-text { left: -14px; width: 99.3vw; height: 4000px; text-align: center; background-color: red; position: relative; } #image-content::before { white-space: pre; position: absolute; bottom: 20px; left: 20px; font-family: Impact; font-size: 55px; font-weight: 550; color: white; z-index: 4; opacity: 1; position: fixed; } #image-content.scrolledDown::before { opacity: 1; content: 'ABC'; } #image-content.scrolledUp::before { opacity: 1; content: "DEF"; }El HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="zoom.css"> </head> <body> <div class="image-container"> <div class="zoom main"> <img src="images/sourcecode.jpg" class="main-image"> </div> <div id="content-anchor"></div> <div id="image-content"></div> </div> <div class="filler"> </div> <div class="main-text"> </div>Me pregunto cómo puedo hacer que esto funcione porque, por lo que puedo decir, las clases no se agregan o las clases no funcionan.
Sugiriendo los siguientes cambios:
$(window).scroll(function() { var windowTop = $(window).scrollTop(); if (windowTop < 800) { $('.image-content').addClass('scrolledDown'); $('.image-content').removeClass('scrolledUp'); } else { $('.image-content').addClass('scrolledUp'); $('.image-content').removeClass('scrolledDown') } });Esto asegura que tiene el selector de clase correcto.