页面滚动条滚动后返回事件----JS
这两天小码哥在做页面的时候，其中有一个效果是想让右侧的一个导航随着页面向下滚动而由原来的固定（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(){});方法。
本文出自 “关注技术专注前端” 博客，请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1621721
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
