想弄的效果: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>