Anteponga un elemento en el desplazamiento solo una vez si existe la clase. Eliminar si la clase no existe.
Por ejemplo, desplácese hacia abajo -> la clase se agrega + anteponer. Desplácese hacia atrás -> la clase se elimina, por lo que se antepone y así sucesivamente.
$(window).scroll(function() { if($("#container").hasClass("active")){ $("#container-wrapper").addClass("active-exists"); $("#container-wrapper").prepend("<p>Test</p>"); } else { $("#container-wrapper").removeClass("active-exists"); $("#container-wrapper").remove("<p>Test</p>"); }});
El comportamiento actual sigue agregando infinitas <p>Test</p> sin parar, solo lo envía como spam mientras se desplaza hacia arriba y hacia abajo.
Puede verificar esto con una bandera "adjunta"
window.appended = false; // set as global variable $(window).scroll(function() { if($("#container").hasClass("active")){ $("#container-wrapper").addClass("active-exists"); if (!window.appended){ // check with global variable $("#container-wrapper").prepend("<p>Test</p>"); appended = true; } } else { $("#container-wrapper").removeClass("active-exists"); $("#container-wrapper").remove("<p>Test</p>"); } }En lugar de verificar si el elemento tiene una clase específica, verifique si la posición de desplazamiento del eje y es 0. También deberá almacenar si ha agregado el elemento en una variable, para no seguir agregando en el desplazamiento.
let elem = $('<p>Test</p>') var hasAdded = false; $(window).scroll(function() { const scrollY = window.scrollY; if (scrollY == 0) { $('#container-wrapper').removeClass('active-exists') elem.remove() hasAdded = false; } else { if (!hasAdded) { $('#container-wrapper').addClass('active-exists').prepend(elem) hasAdded = true } } }); html, body { height: 300%; } #container-wrapper{ position:fixed; height:50px; } .active-exists{ background-color:yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container-wrapper"> <div id="container"> </div> </div>