javascript - 在滚动时更改活动类
问题描述
嗨,开发人员,我想知道如何在特定滚动量(如 100 像素)的下一个孩子上添加 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>
解决方案
<!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>
推荐阅读
- r - 使用 ifelse 到 group_by 并使用 dplyr 进行汇总的函数抛出未使用的参数错误
- machine-learning - 如何实际计算梯度下降的成本函数曲线,即模型随机选择权重多少次?
- c# - 循环所有 bunifu 控件和一个用于 bunifu 文本框
- unity3d - Unity 缺少覆盖按钮
- mysql - 带有“更新级联”和“删除级联”的错误 1451
- python - 使用 forloop 使用 PIL 显示图像
- reactjs - 参考字段不会在自定义行反应管理员中呈现
- reactjs - 我使用谷歌登录在我的 NextJs 应用程序中得到 http://localhost:3000/api/auth/error。为什么?
- r - 使用 ggplot2 的 geom_errorbar 时出现“缺少美学错误”
- angular - 无法将“13/7/2021”转换为 Angular 11 中管道 DatePipe 的日期