Question

嗨，开发者，我想知道如何在特定滚动量（例如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>

Answer 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>

滚动更改活动班级

1 个答案: