javascript - 将类添加到最可见的 div jquery

标签 javascript jquery css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 9 年前

我有一个带有大型水平横幅图像的网页,它们都设置为不透明度 0.5,我想将 .no-opacity 类设置为在视口(viewport)中最明显的横幅滚动。我如何使用 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;    
}

最佳答案

这可能接近您想要的: 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>

关于javascript - 将类添加到最可见的 div jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21161409/

上一篇:javascript - 如何使用 javascript 显示类中的 div 属性

下一篇:css - 可以增加/减少自高度度的 <div>

相关文章:

html - 在 IE/Edge 中将 <HR> 向右对齐

javascript - Selenium - ElementNotVisibleException。元素在 Safari 9.1 中可见,但在 10.1 中不可见?

javascript - 在 RegEx 中转义 MS Word 样式引号

javascript - 如何在 Android WebView 中固定表头

javascript - 禁用 div 上的滚动条

javascript - 需要在一页php中显示输入和输出?

jQuery 改变带有跳过索引的数组输入的值

javascript - 使用 colorbox 定位 iframe 元素

javascript - jQuery 生成 div

php - 带有垂直 <tr> 和 PHP 数组的 Html 表