2

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

到目前为止我的解决方案

所以我想我可能会在交叉点观察者回调函数（我的代码中的stepIandstepII变量）中创建另一个测试变量，它检查回调函数是否之前被触发。如果是这样，不要让元素消失，而是让它们再次出现。

我目前的问题

因此，假设id="hiddenImg"当第一个文本块 ( id="I") 通过视口的 50% 边界时应该出现背景图像 ( )，而当第二个文本块 ( id="II") 进入该区域时它会消失。即使图像在向上滚动时再次可见，如果用户没有完全向后滚动（以便第二个文本块超出视口）然后滚动回底部，则第二个文本块的消失触发器不叫。这意味着背景图像将保持可见，这是不应该的。

这是js部分：

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);
}

这是我的完整代码：

<html>
<head>
<!-- Load the polyfill. -->
<script src="/js/intersection-observer.js"></script>

<script src='https://unpkg.com/intersection-observer@0.5.0/intersection-observer.js'></script>

</head>
<body>
<style>
    .intro-imgs {
display: block;
margin: 0 auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
position: fixed;
position: expression(fixed);
}

.hidden_img {
visibility: hidden;
  opacity: 0;
-ms-transform: scaleX(0); /* IE 9 */
-webkit-transform: scaleX(0); /* Safari 3-8 */
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: visibility 0s 0.5s, opacity 0.5s linear, -webkit-transform 0.5s;
-moz-transition: visibility 0s 0.5s, opacity 0.5s linear, -moz-transform 0.5s;
-o-transition: visibility 0s 0.5s, opacity 0.5s linear, -o-transform 0.5s;
transition: visibility 0s 0.5s, opacity 0.5s linear, transform 0.5s;
}

.visible_img {
  visibility: visible;
  opacity: 1;
-ms-transform: scaleX(1); /* IE 9 */
-webkit-transform: scaleX(1); /* Safari 3-8 */
-o-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: opacity 0.5s linear, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s linear, -moz-transform 0.5s;
-o-transition: opacity 0.5s linear, -o-transform 0.5s;
transition: opacity 0.5s linear, transform 0.5s;
}

.stepper{
        max-width: 70rem;
    margin: 550px auto 600px auto;
    width: 90%;
    background-color: rgba(248, 248, 248, 0.95);
    font-family: "Helvetica";
    font-size: 17px;
    line-height: 26px;
    padding: 15px;
}
</style>

<!--HTML-->
  <div class="headline">
        <img id="hiddenImg" class="hidden_img intro-imgs" src="https://image.shutterstock.com/image-photo/funny-portrait-hero-260nw-410898763.jpg" >
  </div>
  <div id="I" class="stepper">
    <p>Lorem Ipsum</p>
  </div>
  <div id="II" class="stepper">
    <h1>THE HEADLINE</h1>
  </div>

<!-- SCRIPT-->
<script>
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);
}
</script>
</body>
4

0 回答 0