javascript - 到达顶部时隐藏元素

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

 }); 
});