我正在创建一个动画,其中滚动显示/隐藏一个报价。我设法在滚动时显示它,但是我想在它到达屏幕顶部时将其隐藏,因此每次滚动页面时它将重复动画。

目前,它到达顶部时并没有隐藏它,但是我找不到原因。
这是codepen

HTML:

<section id="cont_quote">
    <img class="img_quote" src="image">
    <article class="cont_q">
        <p>Lorem ipsum dolor sit amet...</p>
        <blockquote>“Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
   </article>
</section>


JS:

/* Every time the window is scrolled ... */
$(window).scroll( function(){

 /* Check the location of each desired element */
 $('#cont_quote blockquote').each( function(i){

    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){
        $(this).animate({'opacity':'1'},1000);

    } else if($(this).offset().top) {
        $(this).animate({'opacity':'0'},1000);
    }

 });
});


另外,您知道如何固定滚动图像吗?但是,一旦到达cont_quote的末尾,就将其解开吗?

最佳答案

您好您可以尝试如下

/* Every time the window is scrolled ... */
$(window).scroll( function(){

 /* Check the location of each desired element */
 $('#cont_quote blockquote').each( function(i){

    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){
        $(this).animate({'opacity':'1'},1000);

    }
    if ($(window).scrollTop() <  $(this).offset().top) {
        $(this).animate({'opacity':'0'},1000);
    }

 });
});

10-05 20:55
查看更多