Question

我有这个ul安排：

HTML

<ul>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
<li class="post red"></li>
  ...
</ul>

CSS

.post{height:80px;width:300px;border:1px solid green;}

我希望滚动在其级别后传递li背景颜色....

我试过这个但没有什么

JQUERY

$(window).scroll(function() {    

 if($(window).ScrollTop == $(this).offset().top){
         $(".post").toggleClass("red blue");//prior add
        $(this).addClass("blue");
 }

});

我不会与#id合作，因为我不知道如何处理它，我的页面有一个复杂的安排，没有Id配置

这是一个不起作用的小提琴https://jsfiddle.net/uawLLvfx/1/

Answer 1

我希望在滚动传递到它的级别后改变背景颜色....

使用scrollTop()功能，而不是＆＃34; .ScrollTop＆＃34;

＆＃13;

let $w = $(window), lis = Array.from(document.querySelectorAll('li'));
$w.scroll(function() {    
   lis.forEach(function (li) {
      let $li = $(li);
      if($w.scrollTop()+ $li.outerHeight() >= $li.offset().top) {
          $li.addClass("blue")
             .siblings().removeClass('blue')
      }
   })

});

＆＃13;

.red{background-color:red}
.blue{background-color:blue}
li{min-height: 100px; margin-top: 15px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="post red">Test1</li>
<li class="post red">Test2</li>
<li class="post red">Test3</li>
<li class="post red">Test4</li>
<li class="post red">Test5</li>
<li class="post red">Test6</li>
<li class="post red">Test7</li>
<li class="post red">Test8</li>
<li class="post red">Test9</li>
<li class="post red">Test10</li>
<li class="post red">Test11</li>
<li class="post red">Test12</li>
</ul>

＆＃13;

使用Jquery基于滚动位置更改元素颜色

1 个答案: