修复鼠标滚动时顶部变化的 BUG ，通过CSS3的属性 -webkit-transition 来完成缓慢伸缩

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

想弄的效果：http://tox.ourstu.com/

能这样更好：https://disqus.com/

现在的代码，鼠标滚动的时候，bug实在太大

//顶部效果
$(window).scroll(function() {
    //想通过延时来缓解狂上下滚动的bug...似乎没效果
    if($(window).scrollTop() <= 90){
        var scrollDown = setInterval(function(){
            if($(window).scrollTop() > 90){
                clearInterval(scrollDown);
                return false;
            }
            $("#header").animate({
                 "padding-top": "30px",
                 "padding-bottom": "30px"
            });
        },20)
    }else{
        var scrollUp = setInterval(function(){
            if($(window).scrollTop() <= 90){
                clearInterval(scrollUp);
                return false;
            }
            $("#header").animate({
                "padding-top": "15px",
                "padding-bottom": "15px"
            });
        },200)
    }
})

最后我用CSS3瞎折腾搞得效果还差强人意。

先写了页面的css：

<style type="text/css">
#header,.header{
	-webkit-transition: all ease 1s;
        -moz-transition: all ease 1s;
        -o-transition: all ease 1s;
        transition: all ease 1s;
}
.small-header{
	padding-top: 15px!important;
	padding-bottom: 15px!important;
}
.public-transparency{
	background-color: rgba(255, 255, 255, 0.81);
}
</style>

然后是通过滚动来触发css的变化，从而使得样式变化，主要就是因为有了-webkit-transition这个属性。

<script type="text/javascript">
$(window).scroll(function() {
	if($(window).scrollTop() <= 90){
		$(".header").removeClass("public-transparency");
		$("#header").removeClass("small-header");
	}else{
		$(".header").addClass("public-transparency");
		$("#header").addClass("small-header");
	}
})
</script>