javascript - 如何触发仅在 wapoints 中可见的类
问题描述
blockList li
在每个部分中,我都有多个部分。我如何才能仅触发当前blockList li
项目的当前项目?目前,一旦任何列表项在视图中,它们都会在整个页面中触发,即使它们不在视图中。
下面的片段说明了我遇到的问题。
$('.blockList').waypoint(function() {
$('.blockList li').each(function(index) {
setTimeout(()=>{
$(this).addClass('active');
}, 200*index);
});
}, {
offset: '60%'
});
#blue, #red {
width: 100%;
height: 100vh;
}
#blue {
background: blue;
}
#red {
background: red;
}
.blockList {
margin: 15px 0;
text-align: left;
}
.blockList li {
font-size: 1rem;
color: #FFF;
margin: 20px 0;
opacity: 0;
-webkit-transition: ease 0.4s;transition: ease 0.4s;
-webkit-transform: translateY(-15px);transform: translateY(-15px);
}
.blockList li.active {
opacity: 1;
-webkit-transform: translateY(0px);transform: translateY(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="blue">
<ul class="blockList">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</section>
<section id="red">
<ul class="blockList">
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</section>
解决方案
您正在为所有这些项目添加活动类。
$('.blockList li').each(function(index) {
setTimeout(()=>{
$(this).addClass('active');
}, 200*index);
});
TL:TR
简而言之。您基本上为每个列表元素添加了两次活动类。因为您是在乞讨时添加它,然后在 60% 的偏移量处添加它。
它循环遍历所有 li 并放置活动类。因此,它不必在视图中,因为它会增加负载。
一种解决方案可能是在第二个对象的浏览器中获得位置,或者制作一个紧凑的系统来检查所有这些对象,放置在数组中。所以它会检查它的位置->滚动检查是否到达任何元素->如果到达,将活动类添加到对应的ID。
var p = $( "#red" ).position;
var Positions = {top: p.top};
然后获取您的中心窗口位置类似:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
然后比较它们,如果它到达元素。
然后获取它的 id 并将.active
类添加到 中#red li
,而不是一般 li。
在这种情况下我会做什么:
var global_list = {}; var elemCount = 0;
$(document).ready(function() {
//call initFunc, after its complete, call elimination (so it would check on load) and then set on scroll.
initFunc(function() {
elimination();
$(document).on('scroll', function() { elimination() });
});
//This function is basicaly your startup.
function initFunc(int) {
$('.blockList').each(function() {
var p = $(this).position(); //Lets get its position.
var id = $(this).attr('id'); //Lets get its ID
global_list[id] = p.top; //Lets asign ID -> topPosition, so { first: 8 }...
elemCount++;
});
int();
}
//This assigns needed stuff for allready reached objects.
function elimination() {
if(elemCount != 0) { //Did we allready show all elements?
var cb = $(this).scrollTop() + ($(this).height()), ct = $(this).scrollTop(); //Gets top position, and bottom.
var cP = ct + ((cb - ct)/2); //Gets your center point of viewport - ad half screen size to top;
for(var k in global_list) { //Loop trough all element that are left and see if we did scroll.
if(global_list[k] <= cP) { //Lets check if user scolled to it.
var ic=0;
$('#'+k+' li').each(function() {
setTimeout(()=>{
$(this).addClass('active');
}, 200*ic);
ic++
});
delete global_list[k]; //Lets delete allready assigned classes
elemCount--; //Decreses elements count, so eventualy once all reached, it becomes 0;
}
}
}
}
});
#first {
height: 1000px;
}
#second {
height: 1000px;
}
.beatiful {
background: yellow;
}
.div_div li {
font-size: 1rem;
color: #000;
margin: 20px 0;
opacity: 0;
-webkit-transition: ease 0.4s;transition: ease 0.4s;
-webkit-transform: translateY(-15px);transform: translateY(-15px);
}
.div_div li.active {
opacity: 1;
-webkit-transform: translateY(0px);transform: translateY(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='div_div' id='first'>
<ul class="blockList" id='first'>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<div class='div_div' id='second'>
<ul class="blockList" id='second'>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
推荐阅读
- python-2.7 - 将菜单栏添加到现有的 MainWindow 类
- python - 我收到一个错误,因为无法识别图像文件中的数据,我也尝试使用 gif、jpeg、png 扩展名
- jenkins - Jenkins 为私有 git 存储库提供错误
- linqpad - 打开时执行 LINQPad 查询
- reactjs - 如何重构此代码?如何使此代码更好?
- matlab - Matlab离散时间傅里叶变换算法
- ios - 如何修复 iOS 中的“EXC_CRASH (SIGABRT)”崩溃
- javascript - 从外部 JS 文件加载时幻灯片无法正确显示
- php - 多个复选框值未在php中发送到电子邮件
- arrays - Swift 中的三层数组