程序博客网 > java版qq还能用吗

往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox)

来源：互联网 发布：java版qq还能用吗 编辑：程序博客网 时间：2024/05/16 08:46
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  5.         <script>  
  6.         // 定义菜单栏离页面顶部的距离，默认为200  
  7.         var divOffsetTop = 200;  
  8.         //滚动事件  
  9.         window.onscroll=function(){  
  10.             var div = document.getElementById("divId");  
  11.             // 计算页面滚动了多少（需要区分不同浏览器）  
  12.             var topVal = 0;  
  13.             if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678  
  14.                 topVal = window.pageYOffset;  
  15.             }  
  16.             else if(document.documentElement.scrollTop ){//IE678 的非quirk模式  
  17.                 topVal = document.documentElement.scrollTop;  
  18.             }  
  19.             else if(document.body.scrolltop){//IE678 的quirk模式  
  20.                 topVal = document.body.scrolltop;  
  21.             }  
  22.             if(topVal <= divOffsetTop){  
  23.                 div.style.position = "";  
  24.             }  
  25.             else {  
  26.                 div.style.position = "fixed";  
  27.             }  
  28.         };  
  29.         // 页面加载完之后，计算菜单栏到页面顶部的实际距离  
  30.         window.onload=function(){  
  31.             var div = document.getElementById("divId");  
  32.             divOffsetTop = div.offsetTop;  
  33.         };  
  34.         </script>  
  35.     </head>  
  36.     <body>  
  37.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  38.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  39.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  40.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  41.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  42.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  43.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  44.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  45.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  46.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  47.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  48.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  49.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  50.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  51.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  52.         <div id="divId" style="width: 500px; height: 40px; line-height: 40px; top: 0px; background: pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>  
  53.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  54.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  55.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  56.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  57.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  58.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  59.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  60.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  61.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  62.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  63.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  64.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  65.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  66.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  67.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  68.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  69.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  70.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  71.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  72.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  73.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  74.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  75.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  76.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  77.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  78.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  79.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  80.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  81.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  82.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  83.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  84.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  85.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  86.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  87.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  88.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  89.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  90.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  91.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  92.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  93.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  94.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  95.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  96.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  97.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  98.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  99.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  100.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  101.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  102.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  103.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  104.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  105.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  106.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  107.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  108.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  109.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  110.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  111.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  112.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  113.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  114.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  115.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  116.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  117.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  118.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  119.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  120.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  121.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  122.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  123.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  124.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  125.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  126.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  127.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  128.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  129.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  130.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  131.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  132.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  133.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  134.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  135.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  136.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  137.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  138.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  139.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  140.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  141.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  142.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  143.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  144.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  145.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  146.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  147.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  148.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  149.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  150.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  151.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  152.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  153.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  154.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  155.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  156.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  157.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  158.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  159.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  160.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  161.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  162.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  163.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  164.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  165.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  166.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  167.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  168.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  169.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  170.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  171.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  172.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  173.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  174.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  175.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  176.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  177.         aaaaaaaaaaaaaaaaaaaaaaa<br>  
  178.     </body>  
  179. </html>  
0 0
java版qq还能用吗 java版qq还能用吗
原创粉丝点击
热门IT博客
pc加拿大预测软件pc加拿大预测软件
suse linux无法连接ftpsuse linux无法连接ftp
淘宝网用网银支付
java string 的split
js从后往前截字符串
济南赛博网络进校
程序员都用github吗?
js脚本压缩
mysql 1227
淘宝组装电脑店铺排名
怎么用java写服务器
美国非农就业数据9月
ubuntu更新网卡驱动
奥运会中国男篮数据
软件系统需求描述
手机淘宝怎样复制链接
mysql跳过密码登陆
那个卡盟主站域名好用
淘宝代购软件
固态盘数据能恢复吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 猪腰枸杞汤 炒猪腰子 卤猪腰子的做法 猪腰汤的做法大全 猪腰怎么炖 猪腰怎么煮 猪腰子是什么 猪腰子炒什么好吃 猪腰图片 猪腰做法 猪腰怎么做 猪腰粥的做法 猪肾 猪肾图片 猪肾的做法 西洋菜陈肾猪骨汤 猪肾汤 猪肾杜仲汤 猪肾的功效 猪肾怎么做好吃 吃猪肾有什么好处 猪腰是猪肾吗 猪肾不能和什么一起吃 腰花是什么 猪胰 猪脑子的做法 猪脑 猪脑花 猪脑的危害 猪脑花火锅煮多久 清蒸猪脑 天麻猪脑汤 男人吃猪脑有什么危害 猪脑图片 女人吃猪脑有什么好处 蒸猪脑 红烧猪脑 猪脑要煮多久 孕妇可以吃猪脑吗 猪脑家常蒸法 炖猪脑的做法

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里