Question

我目前正在基于scrollTop切换标题类，并将逻辑包装在

中

if(scroll_start >= 600) {...}

但是它不能理想地工作，因为显然屏幕分辨率会发生变化。

理想情况下，我想这样做（用伪代码）

if (first section (with an id) is scrolled past) {...}

但是我不确定如何实现？有什么建议吗？

谢谢

Answer 1

获取元素的高度，然后将其从顶部添加到元素的位置

var elementPosition = $([element]).position().top + $([element]).height()

$(document).on('scroll', function() {
    if($(this).scrollTop() > elementPosition){
        // actions
    }
})

Answer 2

这里是一个例子：

      window.addEventListener("scroll", function(){
          var two = document.getElementById("One");
          if (window.scrollY > two.offsetTop + two.offsetHeight){
              console.log("You got it!");
          }

      })

 #One{
        height:50px;
        width:100%;
        background-color:lightblue;
    }
    #Two{
        height:1000px;
        width:100%;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
      <div id="One">Goto: HERE</div>
      <div id="SCROLL">HERE:</div>
      <div id ="Two"></div>
</body>
</html>

检测用户已滚动到第一部分

2 个答案: