Javascript向下滚动到一个部分

我正在我的投资组合网站上工作。我想在用户滚动到指定部分时添加css类。（我想使用Javascript事件）

例如，首先用css隐藏一个元素，然后当用户向下滚动到该部分时，用普通Javascript显示该元素

<div id="info"> info... </div> 
#info { display :none;}

信息。。。
#信息{显示：无；}

---

加载Javascript代码这是一个大问题，您可以使用它，但并非所有浏览器都支持它，另一种方法是使用窗口上的滚动事件

function debounce(func, wait = 20, immediate = true) {
    let timeout
    return function() {
      let context = this,
        args = arguments
      let later = function() {
        timeout = null
        if (!immediate) func.apply(context, args)
      }
      let callNow = immediate && !timeout
      clearTimeout(timeout)
      timeout = setTimeout(later, wait)
      if (callNow) func.apply(context, args)
    }
  }

  const images = document.querySelectorAll('img')

  function checkSlide(e) {
    images.forEach(img => {
      const slideInAt = window.scrollY + window.innerHeight - img.height / 2
      const imageBottom = img.offsetTop + img.height
      const isHalfShown = slideInAt > img.offsetTop
      const isNotScrolledPast = window.scrollY < imageBottom
      if (isHalfShown && isNotScrolledPast) {
        img.classList.add('active')
      } else {
        img.classList.remove('active')
      }
    })
  }

  window.addEventListener('scroll', debounce(checkSlide))

函数去盎司（func，wait=20，immediate=true）{
让超时
返回函数（）{
让上下文=这个，
args=参数
let later=函数（）{
超时=空
如果（！immediate）函数应用（上下文，参数）
}
让callNow=immediate&&！超时
clearTimeout（超时）
超时=设置超时（稍后，等待）
if（callNow）函数应用（上下文，参数）
}
}
const images=document.queryselectoral（'img'））
功能检查幻灯片（e）{
images.forEach（img=>{
const slideInAt=window.scrollY+window.innerHeight-img.height/2
常量imageBottom=img.offsetTop+img.height
常量IshalfShowed=slideInAt>img.offsetTop
const isnotscrolled pass=window.scrollY

这是我根据“javascript30”课程编写的代码，我强烈推荐它，而且它是免费的

总结：

函数debounce用于停止调用事件太多次，超过需要次数

const图像是我的dom上的所有图像，我正在检查这些图像，但是你可以检查你想要检查的任何div

---

checkSlide函数检查我是否已到达并没有通过每个图像，在这里您可以检查所需的每个div。

您可以跟踪窗口的滚动位置和目标元素的顶部位置。然后，当元素到达某个点（例如窗口高度的一半）时，可以给它一个类来修改一些css属性，如

不透明度
或
显示

let targets = document.querySelectorAll('.target');

window.addEventListener("scroll", function(){
  let doc = document.documentElement;
  let top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

  let windowHeight = window.innerHeight;

  for (i = 0; i < targets.length; ++i) {
    let target = targets[i];
    if(target.offsetTop < (top + (windowHeight/2))) {
      target.classList.add("visible");
    }
    else {
      target.classList.remove("visible");
    }
  }
});

let targets=document.querySelectorAll（'.target'）；
addEventListener（“滚动”，函数（）{
让doc=document.documentElement；
设top=（window.pageYOffset | | doc.scrollTop）-（doc.clientTop | | 0）；
设windowHeight=window.innerHeight；
对于（i=0；i

看看这个