Question

这是我的第一篇帖子和问题。请看下面的图片：

我有一个带有块元素div的页面（例如，一行中有一个div，高度为100px，另一个是30个div）。我需要一个解决方案，它将为div添加类，其中包含红色＆＃34;偏移，当我向上或向下滚动以将相同的类移除到偏移量不足的div时。

我知道它必须是抵消的东西，但我无法找到解决方案。我试图用jQuery做这件事。

Answer 1

要计算相对于视口的元素位置，您需要检查getBoundingClientRect，而不是简单：

＆＃13;

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));
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

同样在Fiddle。

jQuery - 在滚动上删除上面和下面的类

1 个答案: