Question

如果我有这样的话：

<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetarget"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>

我想在用户滚动到#show OR /时显示#thetarget，并在用户滚动到#thetarget时使用css样式进行操作，但没有“点击互动”通常与<a href="#thetarget">the target</a>

一样的用户

只有css代码才能实现这一点吗？

如果不是，我怎么能用javascript（而不是jquery）来做这个，所以它根本不会影响性能（=微小的影响）？

谢谢

Answer 1

您也可以使用纯JS

执行此操作

window.onscroll = function() {
  var show = document.getElementById('show');
  
  if (this.pageYOffset > 100) {
    show.style.display = 'block';
  } else {
    show.style.display = 'none';
  }
}

#thetarget {
  height: 1000px;
}
#show {
  display: none;
  position: fixed;
  z-index: 1;
  bottom: 0;
}

<div id="thetarget">
  <h1>Keep scrolling</h1>
</div>
<div id="show">
  <h1>Revealed</h1>
</div>

当用户使用CSS滚动到Node时，更改Node的可见性

1 个答案: