jQuery

Question

这是我的第一个 post 问题。请看下图：

我的页面有块元素 divs（例如，一个 div 排成一排，高度为 100px，30 divs 一个在另一个下面）。我需要将 class 添加到 "red" 偏移量的 divs 的解决方案，当我向上或向下滚动以删除相同的 class 到 divs 没有偏移。

我知道它必须有偏移量，但我真的找不到解决方案。我正在尝试使用 jQuery.

Answer 1

要计算元素相对于视口的位置，您需要检查 getBoundingClientRect，这很容易：

function isInScreenPlusOffset(el, offset) {
    var rect = el[0].getBoundingClientRect();
    return (
        rect.top >= -offset &&
        rect.bottom <= $(window).height()+offset
    );
};
$(window).on('scroll', function(e){
    $('.basic').each(function(i) {
        var thisBox = $(this);
        thisBox.toggleClass('standard', isInScreenPlusOffset(thisBox , 300));
    });
});

.basic {
    border: 1px solid #000;
    width: 200px;
    height: 200px;
    margin: 10px auto;
}
.standard {
    border-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>
<div class="basic">
</div>

也在 Fiddle.

jQuery - 在滚动时移除上方和下方的 class

jQuery - On scroll remove class above and below

javascript

scroll

addclass

removeclass