Jquery removeClass - 在一个部分中添加类

Question

我有一个 div (#my-div) 和其中的一个元素 (#element)。该元素在原点是不可见的。我希望当 my-div 在屏幕上时，该元素变为可见，当我们向上或向下离开时，该元素再次变为不可见。

我使用了一个脚本，当我首先向下滚动到我的-div时它可以工作，但是当我向下滚动或向上滚动时，元素仍然可见，没有进一步的动画发生。

我使用 CSS 进行转换。

HTML:

<section>
    <div id="whatever">It is just a DIV</div>
    <div id="my-div">My DIV     
        <div id="element" class="invisible">The element</div>
    </div>
</section>

CSS:

section {
    width:100%;
    min-height: 4000px;
    text-align: center;
    background-color: #e0e0e0;
}
#whatever {
    width: 80%;
    height: 500px;
    margin: 10%;
    background-color: #d0d0d0;
}
#my-div {width: 80%;
    height: 300px;
    margin: 10%;
    background-color: grey;
}
#element {
    width: 80%;
    height: 100px;
    background-color: red;
    -webkit-transition: all 1500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -moz-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -ms-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -o-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.invisible {
    opacity: 0;
}
.visible {
    opacity: 1;
}

jQuery脚本：

$(window).scroll(function(){            
    if ($(window).scrollTop() <= $('#my-div').offset().top) {
        $('#element').removeClass('invisible').addclass('visible');
    }
    if ($(window).scrollTop() > $('#my-div').offset().bottom) {
        $('#element').removeClass('invisible').addclass('visible');
    }
    else {
        $('#element').removeClass('visible').addclass('invisible');
    }
});

fiddle现场观看：http://jsfiddle.net/igorlaszlo/u0tzu02b/

Answer 1

首先，这里有一个 fiddle 可以正常工作。

我重做了你做的检查。我使用了一个函数来确定 div 是否在屏幕上（我从 here 中获取）。希望大家不要介意。

$(window).scroll(function () {
    if (isScrolledIntoView('#element')) {
        $('#element').removeClass('invisible').addClass('visible');
    } else {
        $('#element').removeClass('visible').addClass('invisible');
    }
});

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

Jquery removeClass - 在一个部分中添加类

Jquery removeClass - addClass within a section

jquery

transition

addclass

removeclass

scrolltop