这两天小码哥在做页面的时候，其中有一个效果是想让右侧的一个导航随着页面向下滚动而由原来的固定（position:absolute;）模式改为悬浮（position:fixed;）模式。我当时就想到了返回函数。可是依照自己的想法写了几个JS都没成功，我在想肯定是我用错了方法了。后来经过偶一再查证，终于解决了该问题，，，下面是想分享给大家的代码。重点其实就是那段JS。当然，其中原理还得是靠自己领悟了。哈哈
代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>利用锚点点击跳转</title>
<style type="text/css">
.content{width:1000px;margin:0 auto;}
.cont{height:500px;}
.cont1{background:#666666;}
.cont2{background:#999999;}
.cont3{background:#CCCCCC;}
.cont4{background:#FF0000;}
.cont5{background:#6699CC;}
.cont h4{font-size:16px;}
.pop1{position:absolute;top:800px;right:50px;width:100px;height:240px;border:1px #00FFFF solid;margin:0;padding:0;list-style:none;}
.pop1 li{width:100px;}
.pop1 li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}
.pop1 li a:hover{background:#6699CC;color:#00FFCC;}
.pop{width:100px;height:240px;border:1px #00FFFF solid;position:fixed;margin:0;padding:0;top:50%;margin-top:-396px;right:50px;list-style:none;}
.pop li{width:100px;}
.pop li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}
.pop li a:hover{background:#6699CC;color:#00FFCC;}
</style>
</head>
<body id="top">
<div class="content">
<div class="cont1 cont"><h4 id="5_1">周一</h4></div><!--cont1-->
<div class="cont2 cont"><h4 id="5_2">周二</h4></div><!--cont2-->
<div class="cont3 cont"><h4 id="5_3">周三</h4></div><!--cont3-->
<div class="cont4 cont"><h4 id="5_4">周四</h4></div><!--cont4-->
<div class="cont5 cont"><h4 id="5_5">周五</h4></div><!--cont5-->
</div><!--content-->
<ul id="popup" class="pop1">
<li class="lis"><a href="#5_1" title="">星期一</a></li>
<li class="lis"><a href="#5_2" title="">星期二</a></li>
<li class="lis"><a href="#5_3" title="">星期三</a></li>
<li class="lis"><a href="#5_4" title="">星期四</a></li>
<li class="lis"><a href="#5_5" title="">星期五</a></li>
<li><a class="toTop" href="#top" title="">Top</a></li>
</ul><!--.pop-->
<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#popup .lis a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 500);
return false;
});
$(document).scroll(function(){
if($(window).scrollTop()>800){
$(‘#popup‘).removeClass(‘pop1‘).addClass(‘pop‘);
}else{
$(‘#popup‘).removeClass(‘pop‘).addClass(‘pop1‘);
};
});
});
</script>
</body>
</html>
在此，小码哥还想提醒大家，注意JS中的$(document).scroll(function(){});方法。