Question

我正在使用Timothy Aaron的代码在向下滚动时逐个显示元素。它运行良好，但元素只有在达到它们的底部时才会变得可见（这会导致DIV具有显着高度的问题，因为人们向下滚动白页一段时间......）。当达到50％时，我应该在代码中修改什么才能应用opacity: 1（我的意思是元素高度的50％）？我尝试了if( bottom_of_window > ( bottom_of_object / 2 ) ){和if( bottom_of_window > ( bottom_of_object - 50% ) ){，但都没有成功。见JSFiddle：http://jsfiddle.net/mGdkj/ 非常感谢，

$(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('hide').css({'opacity':'0'});

        }

    });

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

        /* Check the location of the desired elements */
        $('.hide').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('hide').animate({'opacity':'1'},500);

                }

        }); 

    });

});

Answer 1

试试这个：

$(window).scroll( function(){

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

        var bottom_of_object = $(this).position().top + $(this).outerHeight() / 2;/*here is the change*/
        var bottom_of_window = $(window).scrollTop() + $(window).height();


            if( bottom_of_window > ( bottom_of_object + 20 )  ){

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

            }

    }); 

});

当其高度的50％到达屏幕底部时显示元素

1 个答案: