我正在创建一个动画,其中滚动显示/隐藏一个报价。我设法在滚动时显示它,但是我想在它到达屏幕顶部时将其隐藏,因此每次滚动页面时它将重复动画。
目前,它到达顶部时并没有隐藏它,但是我找不到原因。
这是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);
}
});
});