{"id":910,"date":"2017-03-12T12:50:06","date_gmt":"2017-03-12T04:50:06","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=910"},"modified":"2017-03-12T12:10:06","modified_gmt":"2017-03-12T04:10:06","slug":"%e5%8e%9f%e7%94%9fjs-%e5%90%b8%e9%a1%b6%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=910","title":{"rendered":"\u539f\u751fjs – \u5438\u9876\u6548\u679c"},"content":{"rendered":"

\u5b9e\u73b0\u601d\u8def\u5982\u4e0b\uff1a
\n1. div\u521d\u59cb\u5c45\u666e\u901a\u6587\u6863\u6d41\u4e2d
\n2. \u7ed9window\u6dfb\u52a0scroll\u4e8b\u4ef6\uff08\u53ef\u4e8b\u4ef6\u8282\u6d41\uff09\uff0c\u83b7\u53d6div\u7684offset\u7684top\u503c\uff0c\u6eda\u52a8\u65f6scrollTop\u503c\u548ctop\u6bd4\u8f83\uff0c\u5f53\u5230\u8fbetop\u65f6\u7ed9div\u6dfb\u52a0\u4e00\u4e2afixed\u7684class\u4f7f\u5176\u56fa\u5b9a
\n3. \u5411\u4e0a\u6eda\u52a8\u65f6\u5f53\u5230\u8fbediv\u521d\u59cbtop\u65f6\u5219\u5220\u9664fixed\u7684class\uff0c\u6b64\u65f6div\u53c8\u56de\u5230\u666e\u901a\u6587\u6863\u6d41\u4e2d
\n4. fixed\u6837\u5f0f\u975eIE6\u6d4f\u89c8\u5668\u4f7f\u7528position:fixed\uff0cIE6\u4f7f\u7528position:absolute\u548cIE expression<\/p>\n

ps\uff1a\u6548\u679c\u9884\u89c8\u65f6\u8bf7\u70b9\u51fb\u53f3\u4e0a\u89d2\u5168\u5c4f\uff01<\/p>\n

<!doctype html>\r\n<html>\r\n\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>\u5438\u9876\u83dc\u5355-qdabc.cn<\/title>\r\n  <style>\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    #div1 {\r\n      width: 100%;\r\n      height: 50px;\r\n      background: skyblue;\r\n    }\r\n  <\/style>\r\n  <script>\r\n    window.onload = function() {\r\n      var oDiv = document.getElementById('div1');\r\n      var divT = oDiv.offsetTop;\r\n      \/\/console.log(divT);\r\n      window.onscroll = function() {\r\n        \/\/ \u83b7\u53d6\u5f53\u524d\u9875\u9762\u7684\u6eda\u52a8\u6761\u7eb5\u5750\u6807\u4f4d\u7f6e \uff08\u4f9d\u6b21\u4e3a\u706b\u72d0\u8c37\u6b4c\u3001safari\u3001IE678\uff09\r\n        var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;\r\n\r\n        if (scrollT >= divT) {\r\n          if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {\r\n            \/\/ \u517c\u5bb9IE6\u4ee3\u7801\r\n            oDiv.style.position = 'absolute';\r\n            oDiv.style.top = scrollT + 'px';\r\n            oDiv.style.left = 0 + 'px';\r\n          } else { \r\n            \/\/ \u6b63\u5e38\u6d4f\u89c8\u5668\u4ee3\u7801\r\n            oDiv.style.position = 'fixed';\r\n            oDiv.style.top = 0;\r\n            oDiv.style.left = 0;\r\n          }\r\n        } else\r\n          oDiv.style.position = '';\r\n      }\r\n\r\n    }\r\n  <\/script>\r\n<\/head>\r\n\r\n<body>\r\n  <div class=\"all\">\r\n    \u4ee5\u4e0a<br>\r\n    \u4ee5\u4e0a<br>\r\n    \u4ee5\u4e0a<br>\r\n    \u4ee5\u4e0a<br>\r\n    \u4ee5\u4e0a<br>\r\n    \u4ee5\u4e0a<br>\r\n    \u4ee5\u4e0a<br>\r\n    <div id=\"div1\"><\/div>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n    \u5566\u5566\u5566\u5566\u5566<br>\r\n  <\/div>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u539f\u751fjs – \u5438\u9876\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u5b9e\u73b0\u601d\u8def\u5982\u4e0b\uff1a 1. div\u521d\u59cb\u5c45\u666e\u901a\u6587\u6863\u6d41\u4e2d 2. \u7ed9window\u6dfb\u52a0scroll\u4e8b\u4ef6\uff08\u53ef\u4e8b\u4ef6\u8282\u6d41\uff09\uff0c\u83b7\u53d6div\u7684offset\u7684top\u503c\uff0c\u6eda\u52a8\u65f6scrollTop\u503c\u548ctop\u6bd4\u8f83\uff0c\u5f53\u5230\u8fbetop\u65f6\u7ed9di […]<\/p>\n","protected":false},"author":1,"featured_media":84,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,198],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/910"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=910"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/910\/revisions"}],"predecessor-version":[{"id":911,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/910\/revisions\/911"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/84"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=910"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}