在滚动时，检查div的列表是否正在叠加静态的

Question

我在页面底部有一个帖子列表和一个徽标。职位的标题是在最左边以及徽标，他们重叠在某些位置。我需要设置一个0.25个不透明度的徽标图像，只有在文本的..cat日期是以上的.logo。

我试着从底部得到每个元素的位置，但是标识每次都保持0.25的不透明度。

谢谢!

​

$(window).scroll(function () {
    $('.cat-date').each(function(){
        var bottom = $(this).position().top+$(this).outerHeight(true);//distance from bottom
        if (bottom < 210){
            $(".logo").css("opacity","0.25");
        }
    console.log(bottom)
  })
});

.cat-date{
  height:50px;
  width:200px;
  color:blue;
  margin-bottom:150px;
  z-index:9999;
  position:relative;
}
.logo{
  height:50px;
  width:250px;
  background-color:red;
  position:fixed;
  bottom:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div> 
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="logo"></div>

​

Answer 1

试试这个：

​

$(window).scroll(function () {
    var logoTop = $('.logo').offset().top;
    var logoBottom = logoTop + $('.logo').height();
    $('.cat-date').each(function(){
        var catTop = $(this).offset().top;
        var catBottom = catTop + $(this).height();
        if(catTop > logoTop && catTop < logoBottom || catBottom > logoTop && catBottom < logoBottom) {
            $('.logo').css('opacity', '0.25');
            return false;
        }
        else {
            $('.logo').css('opacity', '1');
        }
    });
});

.cat-date{//Just remove the `height` property from the `.cat-date` selector
  width:200px;
  color:blue;
  margin-bottom:150px;
  z-index:9999;
  position:relative;
}
.logo{
  height:50px;
  width:250px;
  background-color:red;
  position:fixed;
  bottom:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div> 
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="logo"></div>

​