单凭DIV+CSS恐怕不行，你要是会JQ可以这么干：
//jq部分$(document).scroll(function(e) {
if($(document).scrollTop()!=0){
$("#test2").stop()
$("#test2").animate({"top":"0"})
}
else{
$("#test2").stop()
$("#test2").animate({"top":"20px"})
}
}) <!-- HTML部分 -->
<div id="test2"></div> /* CSS部分 */
#test2 { position:fixed top:20px background:#F30 }
如下代码可以实现，你试试看吧：
<!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>
<title></title>
<style type="text/css">
html, body {
width:100%
margin:0px auto
padding:0px auto
}
#apDiv1 {
height:2000px
}
#apDiv2 {
position:absolute
width:100%
height:35px
z-index:999
background-color:#3399FF
top: 100px
}
</style>
<script type="text/javascript">
window.onscroll=function(){
var t=document.documentElement.scrollTop||document.body.scrollTop
var div2=document.getElementById("apDiv2")
if(t>= 100){
div2.style.position = "fixed"
div2.style.top = "0px"
}else{
div2.style.position = "absolute"
div2.style.top = "100px"
}
}
</script>
</head>
<body>
<div id="apDiv1" ></div>
<div id="apDiv2" ></div>
</body>
</html>
