javascript - 当元素 50% 的高度到达屏幕底部时显示一个元素

Question

我正在使用Timothy Aaron的代码在向下滚动时一一显示元素。它运作良好，但元素只有在到达底部时才可见（当人们向下滚动白页一段时间时，这会导致高度显着的 DIV 出现问题......）。opacity: 1当达到 50%（我的意思是元素高度的 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);

            }

    }); 

});