刚打开页面效果
拖动滑动条之后效果
页面代码
<!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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("<div>").html("动态创建的div").appendTo($("#div1"));
$("<div/>").html("动态创建的divrrrrrr").appendTo($("#div1")); jQuery(window).bind('scroll resize', function () {
var scrollTop = jQuery(window).scrollTop();
//
if (scrollTop >= 100) {
//alert(scrollTop);
$(" .box").addClass('b_fly_fixtop');
}
else {
// alert('888');
$(" .box").removeClass('b_fly_fixtop'); }
});
});
</script> <style type="text/css">
.contain
{
width:100%;
height:50px;
display:inline-block;
}
.box
{
height:50px;
width:100%;
background-color:Gray;
}
.b_fly_fixtop
{
position: fixed;
top: 0;
left: 0;
width: 100%;
border-top: 0;
z-index: 900;
} </style>
</head>
<body>
<div id="div1"></div>
<div class="">88888</div>
<div style=" height:100px; width:100%"></div>
<div class="contain " id="divtestyyy">
<div class="box "> xians</div>
</div>
<div style=" height:300px; width:100%"></div>
<div style=" height:100px; width:100%">yyyyy</div>
<div id="div1">10</div>
<div id="div2">20</div>
<div id="div3">30</div>
<a href="www.baidu.com">百度</a>
<a href="www.sina.com">新浪</a>
<a href="www.qq.com">腾讯</a>
<a href="www.taobao.com">阿狸</a>
<div id="idouthtml">
<div>888889999</div>
</div>
</body>
</html>