Question

如果element1在可见区域之外，则element2应该可见。如果element1在可见区域内，则应隐藏element2。（如果可能的话，我不希望使用jQuery）到目前为止，我已经知道了。

function check(){
    var div1 = document.getElementById("element1");
    var div2 = document.getElementById("element2");

    if(div1.top > (window.top + viewport.height )) {
        div2.style.display = "none";
    }
    else {
        div2.style.display = "block";
    }
}

由此我得到错误“未定义视口”。我知道必须定义它，但实际上却不知道该如何定义。

Answer 1

您应该将该功能附加到正在滚动的元素上的滚动事件，并检查要检查的滚动位置以及您的element1的末端（作为底部位置）。

这是一个示例：

function check(){
    var div1 = document.getElementById("element1");
    var div2 = document.getElementById("element2");
  
    if(document.documentElement.scrollTop > (div1.clientTop + div1.clientHeight )) {
        div2.style.display = "block";
    }
    else {
        div2.style.display = "none";
    }
}

window.onscroll=check;

body{
  height: 200vh;
  position: relative;
 }
 
 #element1{
  border: 1px solid green;
  width: 200px;
  height: 50px;
}

 #element2{
  border: 1px solid red;
  width: 200px;
  height: 50px;
  position: fixed;
  display: none; /*initial display state*/
  top: 50vh;
  right: 0;
  background-color: salmon;
}

<div id="element1"></div>
<div id="element2"></div>

此外，您还可以检查Intersection Observer API，该API有时用于延迟加载图像。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Answer 2

如果您不打算支持真正的旧浏览器（例如IE11及更低版本），则可以实际使用Intersection Observer API来实现自己的目标。优点是该API实际上包含可配置的逻辑，可以进一步调整您想要切换目标元素的显示状态的阈值。

实际上是almost 74% of global browser traffic actually supports Intersection Observer。 Safari除外。不用担心，there is a polyfill available if you need it。

这里是一个例子：

function callback(entries) {
  entries.forEach(function(entry) {
    var elementToToggle = document.getElementById('element2');
    elementToToggle.style.display = entry.isIntersecting ? 'none' : 'block';
  });
}

var observer = new IntersectionObserver(callback);
observer.observe(document.getElementById('element1'));

body {
  min-height: 200vh;
  position: relative;
}

.element {
  width: 50%;
  height: 50px;
  border: 1px solid rgba(0,0,0,.25);
}

#element1 {
  background-color: steelblue;
  position: absolute;
  top: 100px;
}

#element2 {
  background-color: rebeccapurple;
  position: fixed;
  top: 25;
  right: 0;
}

<div class="element" id="element1"></div>
<div class="element" id="element2"></div>

如果另一个元素在屏幕外（JS），则显示该元素

2 个答案: