嗨，开发者，我想知道如何在特定滚动量（例如100px）的下一个孩子上添加Active类。我如何在jQuery中定义？如果有人帮助我，那对我会很好。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="slider">
<li class="active"> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
</ul>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.section1 li').addClass('active');
} else {
$('.section1 li').removeClass('active');
}
});
</script>
答案 0 :(得分：1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
body{ overflow-x: hidden; padding-top: 50px; }
.slider{ padding: 0px; margin: 0px; }
.slider li{ display: block;padding: 30px; margin-bottom: 30px; }
.active {
background-color: #4a3c31e3;
color: #fff;
}
.active {
position: relative;
right: -100%; display: block;
width: 100%; opacity: 1; visibility: visible;
background: blue;
-webkit-animation: slide 1s forwards;
-webkit-animation-delay: 1s;
animation: slide 1s forwards;
}
@-webkit-keyframes slide {
100% { right: 0%; }
}
@keyframes slide {
100% { right: 0%; }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="slider">
<li class="active"> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
<li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li>
</ul>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.section1 li').addClass('active');
} else {
$('.section1 li').removeClass('active');
}
});
</script>
<script>
$(document).ready(function() {
var timeStart = 0;
function wheely(e) {
var y = e.originalEvent.deltaY;
var timeStop = new Date().getTime();
var timeDiff = timeStop - timeStart;
if (timeDiff > 200) {
if (y > 0) {
nextSlide();
}
if (y < 0) {
prevSlide();
}
}
timeStart = timeStop;
}
function prevSlide() {
if ($('.active').is(':first-child')) {
if (!$('.slider').hasClass('dragging')) {
$('.slide:first-child').addClass('bounce');
setTimeout(function() {
$('.slide:first-child').removeClass('bounce');
}, 300);
}
} else {
$('.active').removeClass('active').addClass('queue').prev().removeClass('prev').addClass('active');
}
}
function nextSlide() {
if ($('.active').is(':last-child')) {
if (!$('.slider').hasClass('dragging')) {
$('.slide:last-child').addClass('bounce');
setTimeout(function() {
$('.slide:last-child').removeClass('bounce');
}, 300);
}
} else {
$('.active').removeClass('active').addClass('prev').next().removeClass('queue').addClass('active');
}
}
function hotkeys(e) {
if (e.keyCode == 38) {
prevSlide();
}
if (e.keyCode == 40) {
e.preventDefault();
nextSlide();
}
}
function dragStart(e) {
e.preventDefault();
if (e.type == 'touchstart') {
$(document).off('mousedown', dragStart);
startPoint = e.originalEvent.touches[0].pageY;
} else {
startPoint = e.pageY;
}
dragDist = 0;
$(document).on('touchmove mousemove', dragMove);
}
function dragMove(e) {
if (e.type == 'touchmove') {
var movePoint = e.originalEvent.touches[0].pageY;
} else {
var movePoint = e.pageY;
}
dragDist = (movePoint - startPoint) / $('.slider').height() * 100;
$('.slider').addClass('dragging');
$('.slide, .bg').css({
transition: '0ms'
});
if (dragDist < 0) {
$('.active .bg').css({
opacity: 1 + (dragDist / 200)
});
$('.active').css({
transform: 'translate3d(0,' + (dragDist / 2) + '%,0)'
}).next().css({
transform: 'translate3d(0,' + (100 + dragDist) + '%,0)'
});
}
if (dragDist > 0) {
$('.active').css({
transform: 'translate3d(0,' + dragDist + '%,0)'
}).prev().css({
animation: 'none',
transform: 'translate3d(0,' + (-50 + dragDist / 2) + '%,0)'
}).find('.bg').css({
opacity: 0.5 + (dragDist / 200)
});
}
}
function dragEnd() {
$(document).off('touchmove mousemove', dragMove);
$('.slide, .bg').removeAttr('style');
if (dragDist > 20) {
prevSlide();
}
if (dragDist < -20) {
nextSlide();
}
setTimeout(function() {
$('.slider').removeClass('dragging');
}, 800);
}
$(document).on('wheel', wheely);
$(document).on('keydown', hotkeys);
$(document).on('touchstart mousedown', dragStart);
$(document).on('touchend mouseup', dragEnd);
});
</script>
</body>
</html>