<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用jquery实现固定顶部效果http://zhidao.51xuediannao.com/thread-12.htm
</title>
<style>
#xiding{ position: fixed; left: 0; top: 0; display: none; /*核心样式 必须的*/
width:100%; height: 30px; background: #ddd;}
</style>
</head>
<body>
<div id="xiding"></div>
<div style="height: 2000px;"></div>
<p><label><input type="radio" name="r" value="1" checked/>男</label></p>
<p><label><input type="radio" name="r" value="2"/></label>女</p>
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js
"></script>
<script>
var $xiding = $("#xiding");
$(window).on("scroll",function(){
var $this = $(this);
var st = $this.scrollTop();
if(st>300){
$xiding.stop(true,true).fadeIn(); //#xiding是要显示的DIV
} else {
$xiding.stop(true,true).fadeOut();
}
});
</script>
</body>
</html>