{"id":6102,"date":"2024-04-14T13:52:51","date_gmt":"2024-04-14T05:52:51","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6102"},"modified":"2024-04-14T13:52:51","modified_gmt":"2024-04-14T05:52:51","slug":"establish-a-fixed-sidebar","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/zh\/establish-a-fixed-sidebar\/","title":{"rendered":"\u5efa\u7acb\u56fa\u5b9a\u5074\u908a\u6b04"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">\n<p>\u4f7f\u7528CSS\u5c6c\u6027\u300cposition:sticky\u300d\u5141\u8a31\u5143\u7d20\u5728\u6372\u52d5\u6642\u9644\u52a0\u5230\u87a2\u5e55\u4e0a\u7684\u7279\u5b9a\u4f4d\u7f6e\uff0c\u985e\u4f3c\u65bc\u5c07\u5176\u9328\u5b9a\u5230\u4f4d\u3002\u6b64\u5c6c\u6027\u5c0d\u65bc\u5728\u8a2a\u5ba2\u700f\u89bd\u60a8\u7684\u7db2\u7ad9\u6642\u4fdd\u6301\u91cd\u8981\u5143\u7d20\uff08\u4f8b\u5982\u5074\u908a\u6b04\uff09\u7684\u53ef\u898b\u6027\u975e\u5e38\u6709\u7528\u3002<\/p>\n<p>\u5728\u672c\u6307\u5357\u4e2d\uff0c\u60a8\u5c07\u4e86\u89e3\uff1a<\/p>\n<ol start=\"1\" role=\"list\">\n<li>\u300c\u4f4d\u7f6e\uff1a\u9ecf\u6027\u300d\u5be6\u65bd\u8aaa\u660e<\/li>\n<li>\u6545\u969c\u6392\u9664\u6280\u5de7<\/li>\n<\/ol>\n<h2>\u4f7f\u7528\u201c\u4f4d\u7f6e\uff1a\u9ecf\u6027\u201d\u7684\u6307\u5357<\/h2>\n<p>\u300cposition:sticky\u300d\u7684\u884c\u70ba\u6703\u6839\u64da\u4f7f\u7528\u8005\u7684\u6372\u52d5\u6d3b\u52d5\u5728\u76f8\u5c0d\u548c\u56fa\u5b9a\u4e4b\u9593\u8f49\u63db\u5143\u7d20\u7684\u4f4d\u7f6e\u3002\u9ecf\u6eef\u5143\u7d20\u4fdd\u7559\u5176\u5728 document \u6d41\u4e2d\u7684\u76f8\u5c0d\u4f4d\u7f6e\uff0c\u76f4\u5230\u5230\u9054\u67d0\u500b\u6efe\u52d5\u9ede\uff0c\u5728\u6b64\u968e\u6bb5\uff0c\u5b83\u7684\u884c\u70ba\u985e\u4f3c\u65bc\u5176\u76f4\u63a5\u7236\u7d1a\u4e2d\u7684\u56fa\u5b9a\u5143\u7d20\u3002\u4e00\u65e6\u9ecf\u6027\u5143\u7d20\u5230\u9054\u5176\u7236\u5bb9\u5668\u7684\u5e95\u90e8\uff0c\u5b83\u5c31\u505c\u6b62\u9032\u4e00\u6b65\u79fb\u52d5\u3002<\/p>\n<p>\u8981\u5728\u5074\u908a\u6b04\u4e0a\u4f7f\u7528\u201c\u4f4d\u7f6e\uff1a\u9ecf\u6027\u201d\uff1a<\/p>\n<ol start=\"1\" role=\"list\">\n<li>\u9078\u64c7\u5de5\u4f5c\u5340\u57df\u5167\u7684\u5074\u908a\u6b04<\/li>\n<li>\u8a2a\u554f <strong>\u98a8\u683c\u9762\u677f<\/strong> &gt; <strong>\u4f4d\u7f6e<\/strong><\/li>\n<li>\u9078\u64c7 <strong>\u9ecf<\/strong> \u5f9e\u63d0\u4f9b\u7684\u9078\u64c7\u4e2d<\/li>\n<li>\u70ba\u9802\u90e8\u3001\u5e95\u90e8\u3001\u5de6\u5074\u6216\u53f3\u5074\u908a\u7de3\u6307\u6d3e\u7279\u5b9a\u503c\uff08\u4f8b\u5982\uff0c0px\u300130px \u7b49\uff09<\/li>\n<\/ol>\n<p>\u672c\u8cea\u4e0a\uff0c\u60a8\u5fc5\u9808\u70ba\u9802\u90e8\u3001\u5e95\u90e8\u3001\u5de6\u5074\u6216\u53f3\u5074\u81f3\u5c11\u6307\u5b9a\u4e00\u500b\u4f4d\u7f6e\u503c\uff0c\u300cposition:sticky\u300d\u624d\u80fd\u6b63\u5e38\u904b\u4f5c\u3002\u9019\u53d6\u6c7a\u65bc\u5143\u7d20\u76f8\u5c0d\u65bc\u5176\u7236\u5143\u7d20\u7684\u4f4d\u7f6e\u4ee5\u53ca\u4f7f\u7528\u8005\u7684\u6efe\u52d5\u65b9\u5411\uff08\u5782\u76f4\u6216\u6c34\u5e73\uff09\u3002<\/p>\n<p>\u82e5\u8981\u5c07\u5074\u908a\u6b04\u56fa\u5b9a\u5230\u9801\u9762\u9802\u90e8\uff0c\u8acb\u5c07\u9802\u90e8\u503c\u8a2d\u70ba 0px\u3002\u6216\u8005\uff0c\u5982\u679c\u60a8\u5e0c\u671b\u5b83\u4ee5 30 \u50cf\u7d20\u7684\u908a\u8ddd\u9644\u8457\u5728\u9802\u90e8\uff0c\u8acb\u5c07 30 \u50cf\u7d20\u6307\u5b9a\u70ba\u9802\u90e8\u503c\u3002\u7576\u60a8\u6372\u52d5\u6642\uff0c\u5074\u908a\u6b04\u61c9\u4fdd\u6301\u56fa\u5b9a\u5728\u5074\u908a\u6b04\u5bb9\u5668\uff08\u5373\u76f4\u63a5\u7236\u7d1a\uff09\u5167\u7684\u9801\u9762\u4e0a\u3002<\/p>\n<h2>\u6545\u969c\u6392\u9664\u6307\u5357<\/h2>\n<p>\u5982\u679c\u51fa\u73fe\u4ee5\u4e0b\u60c5\u6cc1\uff0c\u53ef\u80fd\u6703\u51fa\u73fe\u300c\u4f4d\u7f6e\uff1a\u9ecf\u6027\u300d\u554f\u984c\uff1a<\/p>\n<ul role=\"list\">\n<li>\u6c92\u6709\u70ba\u5143\u7d20\u7684\u81f3\u5c11\u4e00\u500b\u908a\u7de3\uff08\u4f8b\u5982\uff0c\u9802\u90e8\u3001\u5e95\u90e8\u3001\u5de6\u5074\u6216\u53f3\u5074\uff09\u6307\u5b9a\u7279\u5b9a\u8ddd\u96e2\u503c<\/li>\n<li>\u6ea2\u51fa\u50c5\u9650\u65bc\u8a72\u5143\u7d20\u7684\u4efb\u4f55\u7236\u5143\u7d20\u4e0a\u7684\u96b1\u85cf\u3001\u6372\u52d5\u6216\u81ea\u52d5<\/li>\n<li>\u4efb\u4f55\u7236\u5143\u7d20\u90fd\u6709\u660e\u78ba\u5b9a\u7fa9\u7684\u9ad8\u5ea6<\/li>\n<li>\u9019 <a href=\"https:\/\/caniuse.com\/?search=sticky\">\u700f\u89bd\u5668\u7f3a\u4e4f\u5c0d\u9ecf\u6027\u5b9a\u4f4d\u7684\u652f\u6301<\/a><\/li>\n<\/ul>\n<p>\u5982\u679c\u6c92\u6709\u70ba\u5143\u7d20\u7684\u81f3\u5c11\u4e00\u500b\u908a\u7de3\uff08\u4f8b\u5982\uff0c\u4e0a\u3001\u4e0b\u3001\u5de6\u6216\u53f3\uff09\u5206\u914d\u7279\u5b9a\u7684\u8ddd\u96e2\u503c\uff0c\u5247\u300c\u4f4d\u7f6e\uff1a\u9ecf\u6027\u300d\u7684\u529f\u80fd\u5c07\u53d7\u5230\u963b\u7919\u3002\u5982\u679c\u5c07\u8ddd\u96e2\u503c\u61c9\u7528\u65bc\u4e0d\u53d7\u6efe\u52d5\u5f71\u97ff\u7684\u908a\u7de3\uff0c\u300cposition:sticky\u300d\u7684\u884c\u70ba\u53ef\u80fd\u8207\u9810\u671f\u4e0d\u7b26\u3002\u4f8b\u5982\uff0c\u5728\u5782\u76f4\u6efe\u52d5\u6642\u8a2d\u7f6e\u5de6\u5074\u6216\u53f3\u5074\u7684\u8ddd\u96e2\u5c07\u963b\u6b62\u5074\u908a\u6b04\u6309\u9810\u671f\u7c98\u4f4f\u3002<\/p>\n<p>\u300c\u4f4d\u7f6e\uff1a\u9ecf\u6027\u300d\u7684\u6709\u6548\u6027\u4e5f\u53ef\u80fd\u53d7\u5230\u5c0d\u9f4a\u8a2d\u5b9a\u7684\u5f71\u97ff\uff0c\u7279\u5225\u662f\u7576\u5074\u908a\u6b04\u662f Flex \u6216\u7db2\u683c\u5bb9\u5668\u7684\u5b50\u5bb9\u5668\u6642\u3002\u4f8b\u5982\uff0c\u5728\u5177\u6709 flex \u6216 grid \u5c6c\u6027\u7684\u7236\u5143\u7d20\u4e2d\u5c07\u5074\u908a\u6b04\u8207\u9802\u90e8\u5c0d\u9f4a\u6642\u6307\u5b9a\u5230\u5e95\u90e8\u7684\u8ddd\u96e2\u5c07\u9632\u6b62\u5074\u908a\u6b04\u9ecf\u5728\u9801\u9762\u5e95\u90e8\u3002<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"\u4f7f\u7528\u201cposition:sticky\u201d\u5efa\u7acb\u9ecf\u6027\u5074\u908a\u6b04\u3002","protected":false},"author":2,"featured_media":5241,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6102","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/6102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/comments?post=6102"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/6102\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media\/5290"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media?parent=6102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/categories?post=6102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/tags?post=6102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}