时间戳

首页 > 解决方案 > 滚动淡入

html - 滚动淡入

问题描述

我在下面有这段代码，它可以淡入我网站上各种内容和图像的滚动动画，但是我想稍微修改一下。

一些图像大于屏幕高度，因此在整个图像滚动过去之前它们不会淡入。相反，我希望一切都在元素从屏幕顶部变得可见之后淡入，如何修改代码来实现这一点？

$('.site-content h1, .site-content h2, .site-content h3, .site-content h4,  .site-content .left_right_panels_wrapper img,  .site-content .left_right_panels_wrapper .bg_image, .site-content .box_button, .site-content p, .site-content ul li').addClass('hideme');
/* Every time the window is scrolled ... */
$(window).scroll( function(){
    /* Check the location of each desired element */
    $('.hideme').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'},500);
        }
    }); 
});
$(window).scroll();

标签： htmljquerycssscrollfadein

解决方案

好吧，您正在将其与对象的底部进行比较，这是一个简单的更改

你有这个 var bottom_of_object = $(this).offset().top + $(this).outerHeight();

你可以把它改成 var bottom_of_object = $(this).offset().top 这样你就可以得到元素的顶部

您现在将它与元素的顶部进行比较，而不是底部

现在您可能想要更改变量名称，但这取决于您

推荐阅读