javascript - 显示/隐藏 div 取决于 viewpwort 中的特定类

Question

我尝试创建一个固定定位区域，当视口(viewport)中有特定区域时，该区域应该隐藏。当 div 超出视口(viewport)时，应再次显示固定区域。

我为此使用 jquery.viewport。

我的 HTML:

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

我的 JS:

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

这是 fiddle :https://jsfiddle.net/cnx4pvxu/

在我的 fiddle 中，它完美无缺。但是，如果我在自己的虚拟页面中尝试，它会淡出，但不会再次淡入(就像在 fiddle 中一样)。但它和 fiddle 一样完整......

这是虚拟页面:http://tanzstudio-ludwig.de/test.html

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

Answer 1

您必须定义body 的height 和width。

$().is( ':in-viewport' ) 似乎基于 的 height 和 width 工作正文.

简单地说，添加 body { height: 100%;宽度:100%； 到你的 CSS。

或者不用document.elementFromPoint()而不是 jQuery 函数。