0

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

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

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

这是我在网上找到的第一个代码。它似乎在主页（首页）上工作，但是当我进入 iner 页面时它不起作用。并且此代码会产生一些错误（使网站变慢）。

第二个代码适用于特定元素。如果我将更改所有特定元素并仅放置“body *”，它将在网站上弄得一团糟。

第二个问题是滚动。如果某些 div 或部分的内容很长，它将在该 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);
    });
});
4

2 回答 2

0

您可以扩展 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：我没有测试片段......

于 2013-09-21T13:45:21.550 回答
0

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

于 2013-09-21T13:52:45.963 回答