为什么我的基于视口的脚本不添加类

Question

我已经构建了一个应该将类添加到 div 的代码，但没有任何反应。也许你可以帮我解决问题。实际上，我已经完全复制了 codePen 的代码，并且在 codePen 上它正在工作，而在我的网站上却不是。也许是因为我使用的是 WordPress？如何告诉浏览器执行这段代码？

这是我处理过的文件的链接： https://michalkuczek.pl/afsgdtj/

它应该工作的方式：第二个 div 应该在它出现在视口中时淡入。

新代码：

jQ

<script>
function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

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

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

jQuery(window).scroll(function () {
    jQuery('.anim').each(function () {
        if (isScrolledIntoView(this) === true) {
            jQuery(this).addClass('anima').removeClass('viss')
        }
    });

});
</script>

CSS

.anima span{
    display: inline-block;
    transition: 3s;
    opacity: 0;
    animation-duration: 1s;
    animation-name: fInUpSmall;
    animation-fill-mode: forwards;
}
@keyframes fInUpSmall{
    0%{
        opacity:0;
        transform:translateY(15px)}
    100%{
        opacity:1;
        transform:translateY(0)}
}

.anima span:nth-child(1) {
    animation-delay: .1s;
}
.anima span:nth-child(2) {
    animation-delay: .25s;
}.anima span:nth-child(3) {
    animation-delay: .4s;
}.anima span:nth-child(4) {
    animation-delay: .55s;
}.anima span:nth-child(5) {
    animation-delay: .7s;
}.anima span:nth-child(6) {
    animation-delay: .85s;
}
.anima span:nth-child(7) {
    animation-delay: 1s;
}
.anima span:nth-child(8) {
    animation-delay: 1.15s;
}
.anima span:nth-child(9) {
    animation-delay: 1.3s;
}
.viss{
    visibility: hidden;
}

HTML

<div class="anim">
<span>Set</span> <span>a</span> <span>path</span> <span>and</span> <span>get</span> <br><span class="highlight">to&nbsp;</span><span class="highlight">your&nbsp;</span><span class="highlight">destination&nbsp;</span></div>

Answer 1

好的，我明白了。正确的代码在问题中，这里只是摆脱闪烁的附加代码。 为了让闪烁消失，你必须在同一个元素上使用一个额外的类（让我们将它命名为：viss），将这个 css 添加到它：

.viss{
    visibility: hidden;
}

然后在视口中使用以下方法将其删除：

.removeClass('viss')

之后一切顺利，完美无缺。

Answer 2

我已经更新了代码请检查sn-p。 确保您检查了整页中的 sn-p。

function istScrolledIntoView(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(event){
   $('.textbox').each(function () {
        if (istScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="anotherdiv">

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

</div>