淡入滚动

Question

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

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

$('.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();

Answer 1

嗯你是把它比作物体的底部，一个简单的变化

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

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

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

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

Answer 2

如果我理解正确，您希望元素在顶部到达 window 顶部时淡入，而不是在底部超过 window 底部时淡入，对吗？

如果是这样，只需这样做就可以了：

var threshold = 200;

$('.hideme').each( function(){
    var top_of_object = $(this).offset().top;
    var top_of_window = $(window).scrollTop();
    /* If the object reaches the top of the window, fade it it */
    if( top_of_window + threshold >= top_of_object ){
         $(this).animate({'opacity':'1'},500);
    }

更改阈值以使其在页面中显示得更高或更低。

淡入滚动

Fade In On Scroll

html

css

jquery

scroll

fadein