\u539f\u751fJS\u4e2d<\/p>\n
ele.getBoundingClientRect()\uff1a\u83b7\u53d6\u4e00\u4e2a\u5143\u7d20\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u89c6\u53e3\u7684\u7684\u5750\u6807\uff08\u65e0\u8bba\u7236\u5143\u7d20\u5b9a\u4f4d\u4e0e\u5426\uff09\uff0c\u8fd4\u56de\u4e00\u4e2aObject\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u67096\u4e2a\u5c5e\u6027\uff1atop\/left\/right\/bottom\/width\/height\u3002\u51e0\u4e4e\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u8be5\u65b9\u6cd5\u3002jQuery\u4e2d\u6ca1\u6709\u76f4\u63a5\u7684\u65b9\u6cd5\uff0c\u9700\u8981\u7528$(ele).offset().top-$(document).scrollTop()\u8ba1\u7b97\u5f97\u5230\u3002<\/p>\n
\u6ce8\u610f\uff1aright\u662f\u6307\u5143\u7d20\u53f3\u8fb9\u754c\u8ddd\u7a97\u53e3\u6700\u5de6\u8fb9\u7684\u8ddd\u79bb\uff0cbottom\u662f\u6307\u5143\u7d20\u4e0b\u8fb9\u754c\u8ddd\u7a97\u53e3\u6700\u4e0a\u9762\u7684\u8ddd\u79bb\u3002<\/p>\n
pageYOffset \u5c5e\u6027\u662fscrollY\u5c5e\u6027\u7684\u522b\u540d\uff0c\u8bbe\u7f6e\u6216\u8fd4\u56de\u6587\u6863\u5728\u5782\u76f4\u65b9\u5411\u6eda\u52a8\u7684\u50cf\u7d20\u503c\u3002window.pageYOffset == window.scrollY;\u524d\u8005\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u66f4\u597d\u3002<\/p>\n
\u6240\u4ee5\u83b7\u53d6\u5143\u7d20\u5728\u9875\u9762\u6587\u6863\u4e2d\u7684\u4f4d\u7f6e\uff1a<\/p>\n
var\u00a0X=\u00a0ele.getBoundingClientRect().left+scrollTop;\r\nvar\u00a0Y\u00a0=ele.getBoundingClientRect().top+scrollTop;\u3000\u3000\u3000\u3000\/\/\u5728\u7a97\u53e3\u7684\u4f4d\u7f6e+\u6587\u6863\u6eda\u52a8\u6389\u7684\u5c3a\u5bf8<\/pre>\n\u4e3a\u4e86\u8de8\u6d4f\u89c8\u5668\u517c\u5bb9\uff0c\u6587\u6863\u5377\u6389\u7684\u957f\u5ea6\u8bf7\u4f7f\u7528\u5982\u4e0b\u65b9\u5f0f\uff1a<\/p>\n
var\u00a0scrollTop\u00a0=\u00a0document.documentElement.scrollTop\u00a0||\u00a0window.pageYOffset\u00a0||\u00a0document.body.scrollTop;<\/pre>\njQuery\u4e2d<\/p>\n
1.\u9f20\u6807\u76f8\u5bf9\u4e8e\u9875\u9762\u7684\u4f4d\u7f6e<\/p>\n
event.pageX\/event.pageY\uff1a\u9f20\u6807\u76f8\u5bf9\u4e8e\u9875\u9762\u5de6\/\u4e0a\u8fb9\u7f18\u7684\u8ddd\u79bb\u3002<\/pre>\n2.\u5143\u7d20\u7684\u4f4d\u7f6e\u504f\u79fb\u91cf<\/p>\n
offset()\uff1a\u8fd4\u56de\u5305\u542btop\u548cleft\u4e24\u4e2a\u5c5e\u6027\u7684\u5bf9\u8c61\uff0c\u76f8\u5bf9\u4e8edocument\u6587\u6863\u7684\u5750\u6807\u3002<\/p>\n
position()\uff1a\u8fd4\u56de\u5305\u542btop\u548cleft\u4e24\u4e2a\u5c5e\u6027\u7684\u5bf9\u8c61\uff0c\u76f8\u5bf9\u4e8e\u6700\u8fd1\u7684\u5df2\u5b9a\u4f4d\u7684\u5305\u542b\u5143\u7d20\u7684\u4f4d\u7f6e\u3002\u82e5\u65e0\uff0c\u5219\u76f8\u5bf9\u4e8edocument\u3002\u53ea\u5bf9\u53ef\u89c1\u5143\u7d20\u6709\u6548\uff0c\u6ce8\u610fele{visibility\uff1ahidden}\u4e5f\u5c5e\u4e8e\u53ef\u89c1\u5143\u7d20\u3002<\/p>\n
3.\u5143\u7d20\u7684\u5bbd\u9ad8<\/p>\n
width()\/height()\uff1a\u83b7\u5f97\u6216\u8bbe\u7f6e\u5143\u7d20\u3010\u5185\u5bb9\u3011\u7684\u5bbd\/\u9ad8\uff1b\u82e5\u5143\u7d20\u7684display\uff1anone\uff0c\u5176\u503c\u4e3a0\u3002<\/p>\n
innerWidth()\/innerHeight()\uff1a\u83b7\u5f97\u5305\u62ec\u5185\u8fb9\u8ddd\uff08padding\uff09\u7684\u5143\u7d20\u5bbd\u5ea6\/\u9ad8\u5ea6\uff0c\u4e0d\u5305\u62ec\u8fb9\u6846\uff1b<\/p>\n
outerWidth()\/outerHeight()\uff1a\u83b7\u5f97\u5305\u62ec\u5185\u8fb9\u8ddd(padding)\u548c\u8fb9\u6846(border)\u7684\u5143\u7d20\u5bbd\u5ea6\/\u9ad8\u5ea6\uff1b<\/p>\n
outerWidth(true)\/outerHeight(true)\uff1a\u83b7\u5f97\u6574\u4e2a\u5143\u7d20\u7684\u5bbd\u5ea6\/\u9ad8\u5ea6\uff0c\u5305\u62ec\u5916\u8fb9\u8ddd\u3001\u8fb9\u6846\u3001\u5185\u8fb9\u8ddd\u548c\u5185\u5bb9\uff1b<\/p>\n
\u6ce8\u610f\uff1a<\/p>\n
1\uff09ele.css(“height”)\uff1a\u8fd4\u56de\u5e26\u6709\u5b8c\u6574\u5355\u4f4d\u7684\u5b57\u7b26\u4e32\uff08\u4f8b\u5982400px\uff09\uff0c\u82e5\u8fd0\u7b97\u9700\u8981parseInt\u8f6c\u6362\u3002ele.height()\uff1a\u8fd4\u56de\u4e00\u4e2a\u6ca1\u6709\u5355\u4f4d\u7684number\u6570\u503c\uff08\u4f8b\u5982400\uff09\u3002<\/p>\n
2\uff09height()\u603b\u662f\u8fd4\u56de\u5185\u5bb9\u5bbd\u5ea6\uff0c\u4e0d\u7ba1CSS box-sizing\u5c5e\u6027\u503c\u3002\u82e5CSS box-sizing\u4e3aborder-box\uff0c\u5c06\u9020\u6210\u8fd9\u4e2a\u51fd\u6570\u6539\u53d8\u8fd9\u4e2a\u5bb9\u5668\u7684outerHeight\uff0c\u800c\u4e0d\u4ec5\u662f\u539f\u6765\u7684\u5185\u5bb9\u9ad8\u5ea6\u3002<\/p>\n
4.\u6d4f\u89c8\u5668\u76f8\u5173\u5bbd\u9ad8<\/p>\n
$(window).height()\uff1a\u83b7\u53d6\u6d4f\u89c8\u5668\u53ef\u89c6\u7a97\u53e3\u7684\u9ad8\u5ea6\uff1b<\/p>\n
$(document).height()\uff1a\u83b7\u53d6\u6574\u4e2a\u7f51\u9875\u6587\u6863\u7684\u9ad8\u5ea6\uff1b\u5f53\u7f51\u9875\u9ad8\u5ea6\u4e0d\u8db3\u6d4f\u89c8\u5668\u7a97\u53e3\u65f6\uff0c\u8fd4\u56de\u7684\u662f$(window).height()\u3002<\/p>\n
$(document).scrollTop()\uff1adocument\u5143\u7d20\u76f8\u5bf9document\u5143\u7d20\u5bf9\u5e94\u7684\u6eda\u52a8\u6761\u9876\u90e8\u7684\u5782\u76f4\u504f\u79fb\u91cf\uff0c\u53ef\u83b7\u53d6\u5df2\u6eda\u52a8\u7684\u8ddd\u79bb\u6216\u8bbe\u7f6e\u5c06\u8981\u6eda\u52a8\u7684\u8ddd\u79bb\u3002<\/p>\n
\u5373\uff1a\u5f53\u7f51\u9875\u6eda\u52a8\u6761\u62c9\u5230\u6700\u4f4e\u7aef\u65f6\uff0c$(document).height() == $(window).height() + $(window).scrollTop()\u3002<\/p>\n
\u6ce8\u610f\uff1a\u4e0d\u5efa\u8bae\u4f7f\u7528$(“html”).height()\u3001$(“body”).height()\u8fd9\u6837\u7684\u65b9\u6cd5\u83b7\u53d6\u9ad8\u5ea6\uff0c\u539f\u56e0\u6709\uff1a<\/p>\n
$(“body”).height()\uff1abody\u53ef\u80fd\u4f1a\u6709\u8fb9\u6846\uff0c\u83b7\u53d6\u7684\u9ad8\u5ea6\u4f1a\u6bd4$(document).height()\u5c0f\uff1b<\/p>\n
$(“html”).height()\uff1a\u5728\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e0a\u83b7\u53d6\u7684\u9ad8\u5ea6\u4f1a\u6709\u5dee\u5f02\uff0c\u6d4f\u89c8\u5668\u4e0d\u517c\u5bb9\u3002<\/p>\n
$(window).height()\u82e5\u8fd4\u56de\u7684\u4e0d\u662f\u6d4f\u89c8\u5668\u7a97\u53e3\u7684\u9ad8\u5ea6\uff0c\u53ef\u80fd\u662f\u7f51\u9875\u6ca1\u6709\u52a0\u4e0a<!DOCTYPE>\u58f0\u660e\u3002<\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u83b7\u53d6\u5143\u7d20\u5728\u9875\u9762\u6587\u6863\u4e2d\u7684\u4f4d\u7f6e<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u539f\u751fJS\u4e2d ele.getBoundingClientRect()\uff1a\u83b7\u53d6\u4e00\u4e2a\u5143\u7d20\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u89c6\u53e3\u7684\u7684\u5750\u6807\uff08\u65e0\u8bba\u7236\u5143\u7d20\u5b9a\u4f4d\u4e0e\u5426\uff09\uff0c\u8fd4\u56de\u4e00\u4e2aObject\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u67096\u4e2a\u5c5e\u6027\uff1atop\/left\/right […]<\/p>\n","protected":false},"author":1,"featured_media":72,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[85],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/543"}],"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=543"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/543\/revisions"}],"predecessor-version":[{"id":544,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/543\/revisions\/544"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/72"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=543"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}