div容器摆放在某位置，拉动滚动条到达顶部时固定在浏览器顶部的实现方式

实现效果：div容器默认固定在一个位置，在向下拉动滚动条，div触及浏览器窗口顶部时，div变为固定在浏览器顶部，向上拉动滚动条窗口返回原位置。

下面上代码，本效果借助了jquery，需在之前引入jq库。

折叠XML/HTML 代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cmsdx.com效果演示</title>
<style>
.sortbox{height:2000px; margin-top:200px; position:relative;}
.leftsnav{position:absolute;margin-left:50%;left:-660px;width:97px;top:0;font-size:16px;background:#1656b7;}
.leftsnav a{color:#fff;display:block;width:100%;height:45px;line-height:45px;text-align:center;}
.lsntit{height:45px;line-height:45px;text-align:center;color:#fff;background:#333;}
</style>
</head>
<body>
<div class="sortbox">
<h2>主容器</h2>
<div class="leftsnav" id="leftsnav">
<div class="lsntit">分类导航</div>
<span><a href="http://www.cmsdx.com">二手小松</a></span>
<span><a href="http://www.cmsdx.com">二手日立</a></span>
<span><a href="http://www.cmsdx.com">cmsdx.com</a></span>
<span><a href="http://www.cmsdx.com">CMS大学</a></span>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var topheight=$("#leftsnav").offset().top
$(window).scroll(function() {
if($(window).scrollTop()>=topheight){
$("#leftsnav").css("position","fixed");
}
else{
$("#leftsnav").css("position","absolute");
}
});
});
</script>
</body>
</html>

Tags：滚动