Question

我正在创建一个动画，在滚动时，引号显示/隐藏。我已设法在滚动时显示它，但我想在它到达屏幕顶部时将其隐藏，因此每次滚动页面时它都会重复动画。

目前，当它到达顶部时它没有隐藏它，但我找不到原因。这是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的结尾，就解除它吗？

Answer 1

您好，您可以尝试以下

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

 }); 
});

到达顶部时隐藏元素

1 个答案: