Затухание в прокрутке - центр контейнера

Question

В настоящее время я использую следующее для анимации при прокрутке некоторых контейнеров на моем сайте, однако, поскольку некоторые из моих контейнеров имеют большую высоту, есть способ изменить его так он исчезает, когда нижняя часть окна находится в центре контейнера, а не внизу контейнера? Кроме того, есть ли способ указать пиксели?

$(window).scroll(function() { 

    /* Check the location of each desired element */ 
    $('.container').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); 

     } 
    }); 
}); 

Answer 1

что-то вроде этого?

$(window).scroll(function() { 

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

     var top_of_object = $(this).offset().top; 
     var middel_of_window = $(window).scrollTop() + ($(window).height()/2); 

     /* If the object is completely visible in the window, fade it in */ 
     if (middel_of_window > (top_of_object + 300)) { 

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

     } 
    }); 
}); 

Надеюсь, это поможет вам.