在滚动时只前置一次

Question

如果存在class，则在滚动条上只添加一次元素。如果类不存在则删除。

例如向下滚动->类添加+ prepend。向上滚动->Class被移除，preend也被移除，等等

$(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>");
}

});

当前行为不断添加无限的<p>Test</p>不停止，只是在上下滚动时发送垃圾邮件。

Answer 1

您可以使用标记"追加">

来检查这一点。

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>");
}
}

Answer 2

检查元素是否具有特定的类，而不是检查y轴滚动位置是否为0。您还需要在变量中存储是否添加了元素，以便在滚动时不会继续添加元素。

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>