假设我们对每个带有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这个样式。
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。