假设我们对每个带有common-animation类的元素预先设定默认样式normalmove,再当它滚动到特定位置时添加另外一个样式normalanimate。

function commonAnimation() {
        var $object = $(".common-animation");
        $object.each(function () {
            var $this = $(this);
            $this.addClass("normalmove");
            if ($this.length) {
                var $a = $(this).offset().top;
                var $b = $(window).scrollTop();
                var $c = $(window).height() * 0.8; // 0.8含义为从浏览器顶部往下80%的位置时添加normalanimate。
                var $d = $(window).height();
                var $selfHeight = $(this).height();
                if (($b > ($a - $c)) || ($b > ($a - $d + $selfHeight))) {
                    $this.addClass("normalanimate");
                }
            }
        });
    }

上面的例子中$b > ($a – $d + $selfHeight)条件的作用是:某些元素可能在页面底部,当页面滚动到底时,它依然没能进入浏览器80%的位置,这时要对其进行操作,添加normalanimate。
也可以理解为:带有common-animation类的元素进入屏幕80%的位置或者该元素底部内容也进入屏幕时对其添加class。这样能保证无论什么情况下都能添加到normalanimate这个样式。