jquery - 当固定 div 的底部触及此 div 的顶部时，使用 jquery 将类添加到特定的 div

Question

找了很多，没找到解决办法。我的问题是:我的页面上有一个固定的顶部栏，另一个 div 恰好在固定的下方，两个 div 之间的距离为 150px-400px，具体取决于屏幕分辨率。

我想要做的是在固定 div 的底部触及第二个 div 的顶部时向第二个 div 添加一个新类(一些阴影)。我知道我可以使用类似的东西:

$(function(){
$(window).on('scroll', function(){
   if($(this).scrollTop() > 150){
       $('.content').addClass('shadow');
   }else{
       $('.content').removeClass('shadow');
   }
}).scroll();
});

但它仅在 2 个 div 之间的空间为 150px 时才有效。我怎样才能做到这一点，以便我的固定 div 知道它何时触及第二个 div 的顶部？

FIDLLE HERE

Answer 1

试试这个:

$(function(){
  $(window).on('scroll', function(){

     var contentTop = $('.content').offset().top;
     var hHeight = $('.header').height();

     if($(this).scrollTop() > contentTop-hHeight){
         $('.content').addClass('shadow');
     }else{
         $('.content').removeClass('shadow');
     }
  }).scroll();
});