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

它正在运作。你只需要在css中设置.textbox.visible，类之间没有空格。它们是同一元素的两个类，因此它们之间没有空格。请参阅下面的代码段

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

Answer 2

问题在于不等式，它们应该这样表述：

elemTop <= docViewTop &
docViewBottom <= elemBottom

elemBottom 应该大于 docViewBottom（因为后者必须更靠近顶部）和 elemTop bellow docViewTop（因为我们需要 docViewTop 低于 elemTop，前者会离顶部更远，所以值会更大).

在视口内部时将类添加到div

2 个答案: