jquery - 在视口(viewport)内向 div 添加类

Question

我试图让一个 div 元素在它位于视口(viewport)内时获得一个附加的类。为此，我使用了缩小版的 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

它正在工作。你只需要在 css 中设置 .textbox.visible 类之间没有空格。它们是同一元素的 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>