Как создать эффект отложенной загрузки с помощью jquery с одинаковыми элементами класса, показывающими их на скролле друг за другом и с загрузкой, когда он скрыт

Question

У меня есть элементы с тем же классом, и мне нужно показать их при прокрутке, как эффект ленивой загрузки. Я попробовал этот код

jQuery(window).scroll( function(){
    jQuery('.scrollable_section').each( function(i){
        var bottom_of_object = jQuery(this).position().top + jQuery(this).outerHeight();
        var bottom_of_window = jQuery(window).scrollTop() + jQuery(window).height();
        if( bottom_of_window > bottom_of_object ){
            jQuery(this).animate({'opacity':'1'},500, function(){
                jQuery(this).addClass('activeSection');
            });
        }
    });
});

Он отлично работает на рабочем столе, но на планшете он показывает элементы не в правильном положении прокрутки, мне нужно прокручивать и прокручивать, а затем он показывает.