Question

我在页面底部有一个帖子列表和一个徽标。帖子的标题位于最左侧以及徽标，它们在某些位置重叠。仅当.cat-date中的文本高于.logo时，我才需要在徽标图像上设置0.25不透明度。

我尝试从每个元素的底部获取位置，但徽标每次都保持0.25不透明度。

谢谢！

＆＃13;

$(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)
  })
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

试试这个：

＆＃13;

$(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');
        }
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

滚动时检查div列表是否与静态重叠

1 个答案: