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

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

javascript css scroll

Javascript IntersectionObserver：滚动回顶部时触发事件,javascript,css,scroll,intersection-observer,Javascript,Css,Scroll,Intersection Observer,我开始使用IntersectionObserver API，可以创建一些基本的动画，包括隐藏和显示元素。然而，一旦一个人想要滚动回到顶部，被其中一个触发器消失的元素将不再可见我目前的解决方案因此，我想我可能会在交叉点观察者回调函数中创建另一个测试变量（代码中的stepI和stepI变量），该变量检查回调函数之前是否触发过。如果是这样的话，与其消失元素，不如让它们再次出现我当前的问题因此，假设当第一个文本块（id=“I”）通过视口的50%边界时，背景图像（id=“hiddenImg”）应该

我开始使用IntersectionObserver API，可以创建一些基本的动画，包括隐藏和显示元素。然而，一旦一个人想要滚动回到顶部，被其中一个触发器消失的元素将不再可见

我目前的解决方案

因此，我想我可能会在交叉点观察者回调函数中创建另一个测试变量（代码中的

stepI

和

stepI

变量），该变量检查回调函数之前是否触发过。如果是这样的话，与其消失元素，不如让它们再次出现

我当前的问题

因此，假设当第一个文本块（

id=“I”

）通过视口的50%边界时，背景图像（

id=“hiddenImg”

）应该出现，当第二个文本块（

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>


.imgs简介{
显示：块；
边距：0自动；/*将不会垂直居中，并且在IE6/7中不起作用*/
左：0；
右：0；
位置：固定；
位置：表达式（固定）；
}
.hidden_img{
可见性：隐藏；
不透明度：0；
-ms变换：scaleX（0）；/*ie9*/
-webkit转换：scaleX（0）；/*Safari 3-8*/
-o变换：scaleX（0）；
-moz变换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：可见性0.5s，不透明度0.5s线性，-webkit转换0.5s；
-moz变换：可见性0.5s，不透明度0.5s线性，-moz变换0.5s；
-o变换：可见性0.5s，不透明度0.5s线性，-o变换0.5s；
过渡：可见性0.5s，不透明度0.5s线性，变换0.5s；
}
.可见图像{
能见度：可见；
不透明度：1；
-ms变换：scaleX（1）；/*IE 9*/
-webkit转换：scaleX（1）；/*Safari 3-8*/
-o变换：scaleX（1）；
-moz变换：scaleX（1）；
变换：scaleX（1）；
-webkit变换：不透明度0.5s线性，-webkit变换0.5s；
-moz变换：不透明度0.5s线性，-moz变换0.5s；
-o变换：不透明度0.5s线性，-o变换0.5s；
过渡：不透明度0.5s线性，变换0.5s；
}
步进电机{
最大宽度：70雷姆；
利润率：550px自动600px自动；
宽度：90%；
背景色：rgba（2482482480.95）；
字体系列：“Helvetica”；
字号：17px；
线高：26px；
填充：15px；
}
同侧眼睑
标题
var stepI=假；
var stepII=假；
//选项列表
让选项={
rootMargin:'0px 0px-50%'//到达一半视口时
};
//实例化一个新的交叉点观察者
“严格使用”；
var intersectionObserver=新的intersectionObserver（函数（条目，观察者）{
条目.forEach（函数（更改）{
如果（更改。isIntersecting）{
if（change.target.id==“I”）{
$（“#hiddenImg”）.removeClass（“hiddenImg”）；
$（“#hiddenImg”）.addClass（“可见的”#img”）；
stepI=真；
观察者不观察（改变目标）；
} 
如果（change.target.id==“II”）{
如果（第二步==假）{
$（“#hiddenImg”）.removeClass（“可视地图”）；
$（“#hiddenImg”）.addClass（“隐藏的#u映射”）；
第二步=正确
}否则{
$（“#hiddenImg”）.removeClass（“隐藏的#u映射”）；
$（“#hiddenImg”）.addClass（“可见地图”）；
步骤ii=假；
}
}
} 
});
}，选项）；
//段落清单
let elements=document.queryselectoral（“.stepper”）；
对于（元素的elm）{
intersectionObserver.observe（elm）；
}