Question

我开始使用IntersectionObserver API并可以创建一些基本的动画，包括元素的隐藏和出现。但是，一旦一个人想滚动回到顶部，由触发器之一消失的元素就不再可见。

到目前为止我的解决方案

因此，我想我可能会在路口观察器回调函数中创建另一个测试变量（代码中的stepI和stepII变量），该变量检查回调函数是否先前已触发。如果是这样，则不要消失元素，而要让它们再次出现。

我当前的问题

因此，假设当第一个文本块（id="hiddenImg"）通过视口的50％边界时背景图片（id="I"）应该出现，而当第二个文本块（{{1 }}）进入该区域。即使在向上滚动时图像又变得可见，但如果用户没有完全向后滚动（第二个文本块从视口中移出）然后又滚动回到底部，则该第二个文本块的消失触发不被调用。这意味着背景图像将保持可见，而不是可见。

这是js部分：

id="II"

这是我完整的代码：

var stepI = false;
var stepII = false;

// list of options
    let options = {
      rootMargin: '0px 0px -50%' //WHEN reaching half of the viewport
    };

// instantiate a new Intersection Observer  
"use strict";

var intersectionObserver = new IntersectionObserver(function (entries, observer) {
  entries.forEach(function (change) {
      if (change.isIntersecting) {
          if (change.target.id == "I") {
            $("#hiddenImg").removeClass("hidden_img");
            $("#hiddenImg").addClass("visible_img");

            stepI = true;

            observer.unobserve(change.target);
          } 


          if (change.target.id == "II") {
              if (stepII == false) {
                  $("#hiddenImg").removeClass("visible_map");
                  $("#hiddenImg").addClass("hidden_map");

                  stepII = true

              } else {
                $("#hiddenImg").removeClass("hidden_map");
                $("#hiddenImg").addClass("visible_map");

                stepII = false;
              }
          }
      } 
    });
},options);

// list of paragraphs
let elements = document.querySelectorAll(".stepper");

for (let elm of elements) {
  intersectionObserver.observe(elm);
}

IntersectionObserver：滚动回顶部时触发事件

0 个答案: