Question

我正在使用jQuery更改屏幕顶部top:0的固定div。当滚动到达某个点时，类被更改并且CSS被更改。大。

然而，我一直在寻找更好的方法。由于我在距离内容块30px时更改它，因此我在下面执行的操作不能正常工作，因为它使用的是固定高度：

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

... SO

有没有办法做更多的事情......

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

如果有一种方法可以相对于其他元素而不是文档高度来执行此操作。

谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

body {
  margin-bottom: 400px;
}

.one {
  height: 150px;
  background: green;
  margin-bottom: 20px;
}

.two {
  height: 100px;
  background: blue;
}

.two.reached {
  background: red;
}

＆＃13;

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

＆＃13;

检测滚动元素之间的距离

1 个答案: