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

在滚动（加载和调整大小）时，计算每个.top元素的data-fadein位置 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

触发滚动过去的DOM元素

1 个答案: