Question

我尝试做的是在页面加载/准备好时，使用jquery隐藏所有元素，而不是在可见视口（屏幕）中的那些元素。

然后，当用户开始向下滚动并且元素在可见视口（用户屏幕）中时。元素将出现淡入淡出效果。

所以我尝试了一些代码组合，但没有关闭它们100％工作。需要帮助才能在没有错误的情况下完成这项工作。

这是我在网上找到的第一个代码。它似乎在主页（首页）上工作，但当我去iner页面它不起作用。而且这段代码会产生一些bug（网站速度慢）。

第二个代码适用于特定元素。如果我要改变所有特定的元素，只放“身体*”，那将会使网站上的一团糟。

第二个问题是滚动。如果某个div或section有很长的内容，它会在这个div的末尾将不透明度改回1但是它错了！当div的顶部在视口（用户屏幕）中可见时，它需要更改不透明度。

这是第一个代码

$(document).ready(function() {

    /* Hide all elements outside the visible window */
    $('body *').each( function(){

        var top_of_object = $(this).position().top;
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window < top_of_object  ){

            $(this).addClass('hideme').css({'opacity':'0'});

        }

    });

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of the desired elements */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();


                if( bottom_of_window > ( bottom_of_object + 20 )  ){

                    $(this).removeClass('hideme').animate({'opacity':'1'},500);

                }

        }); 

    });

});

这是第二个代码：

$(document).ready(function(){
tiles = $("#sidebar1 .widget , article section").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

Answer 1

你可以扩展sizzle来使用自己的表达式：

jQuery.extend(jQuery.expr[':'], {
    inview: function (el) {
        var $e = $(el),
            $w = $(window),
            top = $e.offset().top,
            height = $e.outerHeight(true),
            windowTop = $w.scrollTop(),
            windowScroll = windowTop - height,
            windowHeight = windowTop + height + $w.height();
        return (top > windowScroll && top < windowHeight);
    }
});

然后，您可以将其用作：

$(window).scroll(function(){
     $('.hideme:inview').animate({opacity:1},500,function(){$(this).removeClass('hideme');});
});

PS：我没有测试过片段......

Answer 2

即使将不透明度设置为零，对象仍会占用空间。如果设置$(this).addClass('hideme').css({'display':'none'});，则浏览器不会呈现该对象，也不会影响页面布局。该页面看起来与从未创建元素this时的页面相同。

如何在页面准备就绪时使用jquery隐藏所有元素，而不是在可见视口（屏幕）中的那些元素，并在滚动时显示它们

2 个答案: