Question

当向下滚动时，如果某个类在ViewPort中消失，我想使FIXED按钮消失。

要具体说明其固定的“添加到购物车”按钮，当您向下滚动到产品说明下方显示的静态“添加到购物车”按钮时，该按钮应会消失。

等待帮助必须很容易，我只是经验不足... 谢谢！

Answer 1

新的Intersection Observer API非常直接地解决了您的问题。

此解决方案将需要一个polyfill，因为Safari和Opera还不支持。（该解决方案中包含了polyfill）。

在此解决方案中，看不见的框是目标（观察到的）。当它出现时，标题顶部的按钮被隐藏。一旦框离开视图，就会显示出来。

以下是解决您的问题的代码：

const buttonToHide = document.querySelector('button');

const hideWhenBoxInView = new IntersectionObserver((entries) => {
  if (entries[0].intersectionRatio <= 0) { // If not in view
    buttonToHide.style.display = "inherit";
  } else {
    buttonToHide.style.display = "none";
  }
});

hideWhenBoxInView.observe(document.getElementById('box'));

header {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 30px;
  background-color: lightgreen;
}

.wrapper {
  position: relative;
  margin-top: 600px;
}

#box {
  position: relative;
  left: 175px;
  width: 150px;
  height: 135px;
  background-color: lightblue;
  border: 2px solid;
}

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<header>
  <button>NAVIGATION BUTTON TO HIDE</button>
</header>
  <div class="wrapper">
    <div id="box">
    </div>
  </div>

当类出现在ViewPort中时，jQuery隐藏

1 个答案: