滚动到顶部时删除类

Posted 2021-05-04

我有一个jquery代码在首页滚动时添加类。我有几个块会对滚动产生动画效果。从顶部到底部滚动时动画很好但是从底部到顶部滚动时也是如此。从下往上滚动时，如何防止动画效果？

+function ($) {

var $animation_elements = $('.show-animate');
    var $window = $(window);

    function check_if_in_view() {
        var window_height = $window.height();
        var window_top_position = $window.scrollTop();
        var window_bottom_position = (window_top_position + window_height);

        $.each($animation_elements, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position + element_height);

            //check to see if this current container is within viewport
            if ((element_bottom_position >= window_top_position) &&
                (element_top_position <= window_bottom_position)) {
                $element.addClass('animated zoomIn');
            } else {
                $element.removeClass('animated zoomIn');
            }
        });

        var $image_elements = $('#views-bootstrap-latest-at-un-geneva-block-1 .row');
        $.each($image_elements, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position + element_height);

            //check to see if this current container is within viewport
            if ((element_bottom_position >= window_top_position) &&
                (element_top_position <= window_bottom_position)) {
                $element.addClass('animated pulse');
            } else {
                $element.removeClass('animated pulse');
            }
        });

        var $image_elements = $('.block-views-blockfront-page-bottom-block-block-1 .group-left');
        $.each($image_elements, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position + element_height);

            //check to see if this current container is within viewport
            if ((element_bottom_position >= window_top_position) &&
                (element_top_position <= window_bottom_position)) {
                $element.addClass('animated fadeInLeft');
            } else {
                $element.removeClass('animated fadeInLeft');
            }
        });
        var $image_elements = $('.block-views-blockfront-page-bottom-block-block-1 .group-right');
        $.each($image_elements, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position + element_height);

            //check to see if this current container is within viewport
            if ((element_bottom_position >= window_top_position) &&
                (element_top_position <= window_bottom_position)) {
                $element.addClass('animated fadeInRight');
            } else {
                $element.removeClass('animated fadeInRight');
            }
        });
    }

    $window.on('scroll resize', check_if_in_view);
    $window.trigger('scroll');
	
}(jQuery);

答案

您需要首先检查滚动的方向，您可以尝试：

更改

$window.on('scroll resize', check_if_in_view);

至：

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
     check_if_in_view
   }
   lastScrollTop = st;
});

下面是一个basic fiddle来展示它的实际效果。