在视口内时向 div 添加类

Question

我试图让 div 元素在视口内时添加一个附加类。为了实现这一点，我使用了缩小版的 JQuery 1.11.0。

这是我的 JQuery 代码：

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
    $('.textbox').each(function () {
        if (isScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });

});

我确信我的课程是可见的，但由于某种原因它没有添加visible课程。有什么想法吗？我的两个受影响的类的CSS如下：

.textbox {
    width: 70%;
    margin: 0 auto;
    opacity: 0;
    transition: all .5s;
    top: -10px;
    position: relative;
}
.textbox .visible {
    opacity: 1;
    top: 0;
}

Answer 1

它正在工作。你只需要.textbox.visible在CSS中设置类之间没有空格即可。它们是同一元素的 2 个类，因此它们之间没有空格。请参阅下面的片段

或者jsFiddle

（红色 div 是您可见的 div ）

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
    $('.textbox').each(function () {
        if (isScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });

});

.textbox {
    width: 70%;
    margin: 0 auto;
    opacity: 0;
    transition: all .5s;
    top: 0px;
    position: relative;
		background:red;
		height:300px;
}
.textbox.visible {
    opacity: 1;
    top: 0;
}
.anotherdiv {
	width:100%;
	background:blue;
	height:100vh;
}

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

</div>
<div class="textbox">

</div>