在滚动过去的 DOM 元素时触发

Question

我试图在用户滚动到各种 DOM 元素时触发操作（我需要它来响应各种屏幕尺寸）。我首先使用offset().top 获取各个元素的位置，然后使用scrollTop() 计算滚动的位置。它有点工作，但动作在 DOM 元素开始之后触发得太远了。我已删除所有填充和边距...

var hT = $('#bioAG').offset().top;
var hT2 = $('#bioTM').offset().top;
var hT3 = $('#contact').offset().top;

$(window).scroll(function () {
  var ws = $(window).scrollTop()          
  if (ws > hT) {
    $("#bioAG").addClass("fade-in");
      } else if (ws > hT2){
       $("#bioTM").addClass("fade-in");
         } else if (ws > hT3)  {
           $("#contact").addClass("fade-in");
             } else {console.log('none');};

}) `

Answer 1

在滚动（加载和调整大小）时，计算每个 data-fadein 元素的 .top 位置。
filter() 然后返回顶部位置小于窗口高度的元素 - 并添加所需的元素类。

var $ele = $("[data-fadein]"),
    $win = $(window);

function fadeInEl() {

  var h = $win.height();

  $ele.filter(function() {
    return this.getBoundingClientRect().top < h;
  }).addClass("fade-in");

}


// Call the above function on:
$win.on("load resize scroll", fadeInEl);

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}


[data-fadein] {
  height:100vh;
  opacity:0;
  transition: 2s;
}
.fade-in {
  opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-fadein id="bioAG"   style="background:#0af">ag</div>
<div data-fadein id="bioTM"   style="background:#f0a">tm</div>
<div data-fadein id="contact" style="background:#0fa">contact</div>

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect