刚打开页面效果
拖动滑动条之后效果
页面代码
<!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; 100%"></div> <div class="contain " id="divtestyyy"> <div class="box "> xians</div> </div> <div style=" height:300px; 100%"></div> <div style=" height:100px; 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>