就是页面上的工具栏,当浏览器向下拉时固定位置,改变Div的position:fixed,当向上拉到顶时改变Div的position:relative,谁有用着的代码给我一份,谢谢啦!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<style>
*{margin:0;padding:0;}
#menuw{width:1000px;margin:0px auto;height:50px;}
#menu{width:1000px;height:50px;background-color:#fcf;}
</style>
<body>
<div style="width:1000px;margin:0px auto;">
顶部<br/>顶部<br/>顶部<br/>顶部<br/>顶部<br/>顶部<br/>顶部<br/>顶部<br/>
</div>
<div id="menuw">
<div id="menu"></div>
</div>
<div style="width:1000px;margin:0px auto;height:1000px;">
内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>
</div>
</body>
<script>
$(function(){
$("#menu").data({offset:$("#menu").offset()});
$(window).bind("scroll",function(){
var menu=$("#menu");
var dtop=$(document).scrollTop();
var offset=menu.data("offset");
if(dtop>offset.top){
if($.browser.msie&&parseInt($.browser.version)<7){//IE6
menu.css({position:"absolute",top:dtop});
}else{
menu.css({position:"fixed",top:0});
}
}else{
menu.css({left:"",top:"",position:""});
}
});
});
</script>
</html>
使用css也可以吧,就不用jquery了
<div id="head"></div> position:fixed;height:100px;
<div id="content"></div> margin-top:100px;