jquery - 反向滚动显示脚本

Question

我有一个简单的时间线，可以在滚动页面时显示信息 block 。向下滚动时，元素从两侧弹入。现在，元素在加载时保持可见，但我希望它们在不在 View 中时隐藏，并在我滚动回顶部时以相同的方式重新出现...

如何修改“反向”中的代码？感谢您的帮助。

这是我使用的代码:

jQuery(document).ready(function($){
var $timeline_block = $('.cd-timeline-block');

//hide timeline blocks which are outside the viewport
$timeline_block.each(function(){
    if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
        $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
    }
});

//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function(){
    $timeline_block.each(function(){
        if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
            $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
        }
    });
});
});

Answer 1

您已经获得了基本语句，只需将行为汇总到一个函数中，并在页面加载时调用该函数一次。

function onScroll() {
  $('.cd-timeline-block').each( function() {
    if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
      $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
    } else {
      $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden').removeClass('bounce-in');
    }
  });
};

$(window).scroll(onScroll);
$(onScroll);  // shorthand for $(document).ready(onScroll);