嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2014-06-12 2494 次浏览 标签 : ZzBlog

免费领取阿里云优惠券 我的直播 - 《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>

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表