javascript - 检测滚动元素之间的距离

Question

我正在使用 jQuery 更改屏幕顶部的固定 div top:0。当滚动到某个点时，类会发生变化，CSS 也会发生变化。太好了。

但是，我一直在寻找更好的方法。由于我在距离内容 block 30px 时更改它，因此我在下面所做的操作效果不佳，因为它使用的是固定高度:

$(function(){
  $(document).scroll(function() {
    var x = $(this).scrollTop();
    if(x > 2025) {
      if($(window).width() > 950) {                
        $('.topFullWidthWhite').addClass('nonStick');
      }
    } else {
      $('.topFullWidthWhite').removeClass('nonStick');
    }
  });
});

所以...

有没有一种方法可以按照...做更多的事情

if(x <= 20 from /* HTML ELEMENT */){
    //DO WHATEVER HERE
}

如果有一种方法可以相对于其他元素而不是文档高度来做到这一点，那就太好了。

谢谢!

Answer 1

尝试为您想要更改 css 的特定元素使用 offset().top

$(window).on("scroll", function() {
  var two = $(".two").offset().top;
  if ($(this).scrollTop() > two - 20) {
    $(".two").addClass("reached");
  } else {
    $(".two").removeClass("reached");
  }
})

body {
  margin-bottom: 400px;
}

.one {
  height: 150px;
  background: green;
  margin-bottom: 20px;
}

.two {
  height: 100px;
  background: blue;
}

.two.reached {
  background: red;
}

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