<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简易的jquery层随滚动条移动</title> <script type="text/javascript" src="jquery.js"></script> </head> <style> body{ padding:0;margin:0;} .main{ width:1000px; background:#FFCCFF; height:2000px; margin:0 auto; position:relative;} .divScroll{ width:100px; height:150px; background:#FFFF99; padding:15px;position:absolute; top:50px; left:50%;margin-left:500px;} </style> <body> <div class="main"> <div class="divScroll">滚动层</div> </div> <script> $(window).scroll(function(){ invertal=setTimeout(function(){ //定时start，加定时可以防止层抖得太厉害 var vtop=$(document).scrollTop(); if(vtop>20){ //如果滚动大于20像素 $(".divScroll").css("top",vtop+"px"); } },300) //定时end，300是时间 }) </script> </body> </html>
效果图：黄色层随滚动条滚动
没滚动时:
滚动后：
