javascript - 如何触发仅在航路点可见的类

Question

我有多个部分，其中每个部分都有 blockList li 类。我如何才能只触发当前的 blockList li 项目？目前，一旦任何列表项在 View 中，它们都会在整个页面中触发，即使它们不在 View 中也是如此。

下面的代码片段说明了我遇到的问题。

$('.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>

Answer 1

您正在为所有的 li 项添加 active 类。

$('.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，而不是 genaraly 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>