Javascript 显示/隐藏div，具体取决于视口中的特定类

我尝试创建一个固定位置的区域，当视口中有特定区域时，该区域应该隐藏。当div位于视口之外时，应再次显示固定区域

我使用jquery.viewport

我的HTML:

<section id="section-1">
  <div class="sticky-info">Sticky</div>
</section>
<section id="section-2">
</section>

  $(window).scroll(function () {
      if ($('#section-2').is(':in-viewport')) {
            $( ".sticky-info" ).fadeOut( 100, function() { });
      } else {
            $( ".sticky-info" ).fadeIn( 100, function() { });
      }
  });

这是小提琴：

在我的小提琴中，它工作得很好。 但是如果我在自己的虚拟页面中尝试，它会淡出，但不会再次淡入（就像在小提琴中一样）。但它和小提琴完全一样

以下是虚拟页面：

---

我做错了什么？或者有更好的解决方案吗？

您必须定义

主体的
高度和
宽度

似乎
$（）.is（“：在视口中”）
是基于
主体的
高度和
宽度来工作的

简单地说，将
body{height:100%；width:100%；}
添加到CSS中

或者不要使用jQuery函数来代替它。
以防您对非jQuery方式感兴趣

var one = document.getElementById("one")
var sticky = document.getElementById("sticky")

window.addEventListener("scroll", function() {
  var c1 = one.offsetTop > window.pageYOffset
  var c2 = (one.offsetTop + one.offsetHeight) > (window.pageYOffset)

  if (c1 || c2) {
    sticky.style.display = "block"
  } else {
    sticky.style.display = "none"
  }
})

你可以看到它在这里工作

这个解决方案不依赖css道具来获取元素的高度，它直接从DOM中获取元素的高度。但是，在查看端口中显示“一”时显示粘性并不一定意味着它总是显示在“一”的底部。
您是否检查了控制台是否正确加载了资源？请尝试并重试。