效果 图:
导航条样式:
#div_nav{
height:25px;
width:100%;
background-color:black;
text-align:center;
top:0;
z-index:1;
}
TOP样式:
#upToTop {
background-color:#dddddd;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
cursor: pointer;
font-size: 12px;
height: 25px;
line-height: 25px;
padding: 0px 10px;
position: absolute;
right: 100px;
display: inline;
}
jQuery代码:
<script type="text/javascript">
var Util = {
scrollEvent:function(){<!--监听window的scroll事件-->
$(window).scroll(function(){
var scrollH=$(window).scrollTop();
/*顶端悬浮*/
if(scrollH > 75){
$("#div_nav").css("position","fixed");
}else{
$("#div_nav").css("position","inherit");
}
/*返回顶端*/
var topH = $(window).height()+scrollH-$("#upToTop").height();
if(scrollH > 100){
$("#upToTop").css("top",topH);
}
},});
upToTop:function(){ <!--返回顶端事件-->
/*直接至顶
window.scrollTo(0,0);*/
/*减速至顶*/
var scrollH = $(window).scrollTop();
window.scrollTo(0,scrollH/1.1);
if(scrollH>0){
window.setTimeout(Util.upToTop,15);
}
}
}
Util.scrollEvent();
</script>
遇到的问题:
我用的是jquery1.10.2,在调用$(window).height()方法时,返回的值与$(document).height()值相同,然后我又用了1.8,1.9版本测试了一下,还是会出现同样的问题,但是用jquery-1.7.2没有问题。
解决方法:
html,body{
height:100%;
}