<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;} .box{height:30px;background:burlywood;width:100%;}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>
<div class="box">
<div class="info"></div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
var oInfo = $(".info");
var oTop = $(".box").offset().top;
var sTop = 0;
$(window).scroll(function(){
sTop = $(this).scrollTop();
oInfo.text('sTop:'+sTop + '==oTop:' + oTop);
if(sTop >= oTop){
$(".box").css({"position":"fixed","top":"0"});
}else{
$(".box").css({"position":"static"});
}
});
</script>
</body>
</html>
