javascript - 改变滚动条上的颜色

Question

尝试向 img 和 title(h3) 添加类以更改颜色。正在将类添加到 .test-shadow 但 h3 不工作。尝试将 sibling 更改为 .closest/.find 但它们也不起作用。想法？

	          /* highlight border of winner */
        $('.img-winner').each( function(i){
            
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, animate border or box shadow */
            if( bottom_of_window > bottom_of_object ){
                
			$(this).siblings('.test-shadow:first').addClass('greenit');
			  $(this).siblings('h3.test-who-us:first').addClass('green');
                    
            }
            
        }); 

<ul class="2-column center test-images">
<li>
<h3 class="test-who-us">Medsite Medical</h3>
<div class="test-img">
<img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop">
<div class="test-shadow"></div>
</div>
</li>
<li>
<h3 class="test-who-them">Top competitor</h3>
<div class="test-img">
<img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors">
<div class="test-shadow"></div>
</div>
</li>
</ul>

Answer 1

<h3是 .img-winner 父项的 sibling .

所以替换$(this).siblings('h3.test-who-us:first')与 $(this).parent().siblings('h3.test-who-us:first')

/* highlight border of winner */
$('.img-winner').each(function(i) {

  var bottom_of_object = $(this).offset().top + $(this).outerHeight();
  var bottom_of_window = $(window).scrollTop() + $(window).height();

  /* If the object is completely visible in the window, animate border or box shadow */
  if (bottom_of_window > bottom_of_object) {

    $(this).siblings('.test-shadow:first').addClass('greenit');
    $(this).parent().siblings('h3.test-who-us:first').addClass('green');

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="2-column center test-images">
  <li>
    <h3 class="test-who-us">Medsite Medical</h3>
    <div class="test-img">
      <img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop">
      <div class="test-shadow"></div>
    </div>
  </li>
  <li>
    <h3 class="test-who-them">Top competitor</h3>
    <div class="test-img">
      <img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors">
      <div class="test-shadow"></div>
    </div>
  </li>
</ul>