往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 | <!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" /> <script> // 定义菜单栏离页面顶部的距离,默认为200 var divOffsetTop = 200; //滚动事件 window.onscroll=function(){ var div = document.getElementById("divId"); // 计算页面滚动了多少(需要区分不同浏览器) var topVal = 0; if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678 topVal = window.pageYOffset; } else if(document.documentElement.scrollTop ){//IE678 的非quirk模式 topVal = document.documentElement.scrollTop; } else if(document.body.scrolltop){//IE678 的quirk模式 topVal = document.body.scrolltop; } if(topVal <= divOffsetTop){ div.style.position = ""; } else { div.style.position = "fixed"; } }; // 页面加载完之后,计算菜单栏到页面顶部的实际距离 window.onload=function(){ var div = document.getElementById("divId"); divOffsetTop = div.offsetTop; }; </script> </head> <body> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> <div id="divId" style="width: 500px; height: 40px; line-height: 40px; top: 0px; background: pink">假设这是菜单栏,在页面往下滚动时它会固定住</div> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaa<br> </body> </html> |