闭包实现滚动条上下的判定 - 年终盘点效果的Demo

标题要长,tag要多,呵,其实我也不知道该取什么标题XD。
言归正传,昨天点了几下虾米网,发现这个年终盘点的页面还是挺有意思的。这样的效果也见得比较多,记得知乎之前也出过这样的东西。此外,大大小小的网页首页上的活动啊这类的,很多都是这样子。

所以试着也做了这样一个页面。年终盘点效果效果其实挺简单,只要分析下实现即可。

这些圈圈是一些div,当宽高都相等的情况下,border-radius给个50%,也就成了圆圈。
至于居中,我给了这些效果divtext-align:center。而上边的留空,用了first-child伪类给了margin-top。然后就是position:absolute的工作了。

布局完毕,剩下的也就交给JS来完成吧。

1.判断滚动条是向上还是向下。尽管有一个mousewheel的鼠标滚轮事件,但是如果有人鼠标滚轮坏了呢(比如我),这个滚轮事件我没用,其实用简单的几行代码就可以完成判定。比如:

var scrollTop = 0;
window.onscroll = function (){
    var mark = scrollTop;
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > mark){
        console.log("向下");
    } else {
        console.log("向上");
    }
}

每一次滚动条滚动,触发了onscroll事件,scrollTop得到更新。但在更新之前,我们先将原来的scrollTop值用一个变量保存起来,然后做一个判定,也就知道了向上还是向下滚动。

2.然后就是向下滚动到距离这个div大致高度的时候,将这个div显示出来(当然,JS在一开始将所有需要应用效果的div隐藏了)。向上滚动到大概位置的时候,隐藏掉相应的div。

3.最后就是代码优化了,怎样更符合自己的逻辑,以及性能方面等等。

Demo地址:demo-05-年终总结圆圈效果-JQuery