jquery的固定定位效果
今天做了个固定定位的效果。比如对导航需要进行固定定位效果：
当没有滚动到导航下面，导航正常显示。
当滚动到导航下面，导航就固定到顶部。
这个效果使用了jquery的方法实现，具体思路为：
1)首先获取导航相对与文档的偏移量top（使用offset().top）
2)定义滚动事件，获取滚动元素的scrollTop，对scrollTop及top进行比较
3)若scrollTop超过了top，则对导航进行position:fixed设置，若没有超过，则对导航设置默认的position:static.
另外针对跳转到固定位置，很多处理是通过锚点实现，location.href=#id或者location.hash=#id这种形式实现。其实也可以利用jquery的offset().top来达到同样的效果，具体可以看下面代码中针对固定定位元素的click事件的处理。
这里写了个demo：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>jquery固定定位demo</title>
<style type="text/css">
body{margin:0;padding-top:100px;background-color:#fff;}
.content{width:500px;height:300px;background-color:#ccc;}
h2{padding:10px;background-color:#000;color:#fff;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="floor">
<h2 class="fixed">第一楼</h2>
<div class="content">ddddd</div>
</div>
<div class="floor">
<h2>第二楼</h2>
<div class="content">ffff</div>
</div>
<div class="floor">
<h2>第三楼</h2>
<div class="content">sdfsf</div>
</div>
<div class="floor">
<h2>第四楼</h2>
<div class="content">aaaaaa</div>
</div>
<script type="text/javascript">
var fixed = $(".fixed");
var position = fixed.css("position");
var offsetTop = fixed.offset().top;
//定义滚动事件，判断scrollTop及offsetTop
$(window).scroll(function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > offsetTop){
fixed.css({"position":"fixed","width":"100%","top":"0"});
}else{
fixed.removeAttr("style").css({"position":position,"width":"100%"});
}
});
//点击固定元素，回到最初的位置
fixed.bind("click",function(){
if($(this).css("position") == "fixed"){
$(this).removeAttr("style").css({"position":"static","width":"100%"});
$(document).scrollTop(offsetTop);
}
});
</script>
</body>
</html>
- 上一篇 »CSS绝对定位属性
- 下一篇 »css固定定位，不随滚动条滚动