将类添加到最可见的div jquery

Question

我有一个包含大横向横幅图片的网页，它们都设置为不透明度0.5，我想将 .no-opacity 类设置为在视口中最明显的横幅滚动。我如何用jQuery实现这一目标？

HTML

<div class="banner">
  <img src="foo1.png" width="960" height="450" />
</div>
<div class="banner">
  <img src="foo2.png" width="960" height="450"/>
</div>
<div class="banner">
  <img src="foo3.png" width="960" height="450"/>
</div>
<div class="banner">
  <img src="foo4.png" width="960" height="450"/>
</div>
<div class="banner">
  <img src="foo5.png" width="960" height="450"/>
</div>
<div class="banner">
  <img src="foo6.png" width="960" height="450"/>
</div>

CSS

body {
  background: #000;
}

.banner {
  opacity: 0.5
}

.no-opacity {
  opacity: 1.0;    
}

Answer 1

这可能接近你想要的： DEMO

$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    var winHeight = $(this).height();
    var winBottom = winTop + winHeight

    $('.banner').each(function (index, item) {
        var itemTop = $(item).position().top;
        var itemHeight = $(item).height();
        var itemBottom = itemTop + itemHeight;

        if (itemTop > winTop && itemBottom < winBottom) {
            $(item).addClass('no-opacity');
        } else {
            $(item).removeClass('no-opacity');
        }
    });
});

<div class="banner">
    <img src="http://placehold.it/200x300/FF0000/00FFFF.png" width="200" height="300" />
</div>
<div class="banner">
    <img src="http://placehold.it/200x300/FF7F00/007FFF.png" width="200" height="300" />
</div>
<div class="banner">
    <img src="http://placehold.it/200x300/FFFF00/0000FF.png" width="200" height="300" />
</div>
<div class="banner">
    <img src="http://placehold.it/200x300/7FFF00/7F00FF.png" width="200" height="300" />
</div>
<div class="banner">
    <img src="http://placehold.it/200x300/00FF00/FF00FF.png" width="200" height="300" />
</div>
<div class="banner">
    <img src="http://placehold.it/200x300/007FFF/FF7F00.png" width="200" height="300" />
</div>
<div class="banner">
    <img src="http://placehold.it/200x300/0000FF/FFFF00.png" width="200" height="300" />
</div>