滚动固定效果：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px} #top{ 100%; height:200px; background-color:#F03} #menu{ 100%; height:50px; background-color:#60F} .item{ 200px; height:300px; background-color:#fF0; margin-top:30px; text-align:center; line-height:300px; vertical-align:middle} </style> </head> <body> <div id="top"></div> <div id="menu"></div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </body> <script type="text/javascript"> //添加一个滚动条监听事件 window.onscroll = function(){ var m = document.getElementById("menu"); if(window.scrollY>=200){ m.style.position="fixed"; m.style.top="0px"; }else{ m.style.position=""; } } </script> </html>
效果图：
