鍓嶈█
sticky杩欑璁捐鏁堟灉鏄粡甯稿嚭鐜扮殑锛屾瘮濡傞櫠瀹濆彸渚х殑宸ュ叿鏍忥紝褰撴垜浠悜涓嬫粴鍔ㄥ埌瀹冪殑浣嶇疆鏃讹紝瀹冨氨浼氶粡浣忛《閮ㄨ窡闅忔粴鍔紝绫讳技position: fixed鐨勬晥鏋滐紝鍙笉杩囧畠鐨勮Е鍙戞潯浠舵槸褰撴垜浠粴鍔ㄥ埌鎵�鍦ㄤ綅缃椂锛屾墠瑙﹀彂fixed鐨勬晥鏋滅殑锛�
鎴戜滑缁忓父鐨勫仛娉曟槸鐢↗avaScript鍘荤洃鍚粴鍔ㄤ簨浠剁劧鍚庤繘琛屽鐞嗭紝姣斿浼氱敤鍒扮被浼約tickyjs鐨勪竴浜涙彃浠� http://stickyjs.com/ 锛屼粠2017骞村乏鍙冲紑濮媍ss涓殑position:sticky灏辨槸涓轰簡杩欎腑璁捐鑰岃癁鐢熺殑锛屼粖澶╂垜浠潵璁よ瘑涓�涓嬪畠銆�
鍏煎鎬�
宸笉澶氫袱骞存椂闂翠簡锛屽吋瀹规�ц繕绠楀彲浠ョ殑锛屽浜庨偅绉嶉潰鍚戞妧鏈汉鍛橈紝鍚庡彴绠＄悊浜哄憳鐨勯」鐩紝鎴戝�掓槸瑙夊緱鍙互鐢ㄤ笂锛屾瘯绔熶粬浠彧鏄崌绾т竴涓嬫祻瑙堝櫒涓嶄粎鑳戒綋楠屾洿濂界殑鏁堟灉锛屼篃鑳介檷浣庣爜鍐滅殑宸ヤ綔閲忥細
https://caniuse.com/#search=position%3A%20sticky
瀛︿範浣跨敤
鎴戜滑鏉ュ疄鐜伴櫠瀹濆彸渚х殑鏁堟灉锛屽氨鐗瑰埆绠�鍗曚簡锛屾病浠�涔堝ソ瀛︾殑锛岀洿鎺ヨ缃氨琛屼簡锛�
.sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
绠�鍗曚緥瀛�: https://jsbin.com/vivixezule/edit?html,css,output
杩樻湁涓�绉嶈璁℃晥鏋滐紝姣斿鍙犲姞鏁堟灉涔熻兘瀹炵幇锛岃繕鏈夊緢澶氭晥鏋滐紝鍏蜂綋澶у鍙互鏍规嵁sticky鐗规�ц嚜鐢卞彂鎸ワ細 鍙犲姞鏁堟灉锛� https://jsbin.com/fegiqoquki/edit?html,css,output
鐗规��
position:sticky鏈変釜闈炲父閲嶈鐨勭壒鎬э紝閭ｅ氨鏄痵ticky鍏冪礌鏁堟灉瀹屽叏鍙楀埗浜庣埗绾у厓绱犱滑浠滑銆傚鏋滀綘鍙戠幇浣犺缃簡涓嶈捣鏁堟灉锛屽彲浠ユ鏌ヤ互涓嬩袱涓師鍥狅細
- 鐖剁骇鍏冪礌涓嶈兘鏈変换浣�
overflow:visible浠ュ鐨刼verflow璁剧疆锛屽惁鍒欐病鏈夋晥鏋滐紝鍥犱负鏀瑰彉浜嗘粴鍔ㄥ鍣紙鍗充娇娌℃湁鍑虹幇婊氬姩鏉★級銆� - 鐖剁骇鍏冪礌楂樺害杩囧皬锛屾牴鏈笉澶焥tikcy鍧楃殑婊氬姩锛屽氨浼氭病鏈夋晥鏋溿��
鍞犲彣
杩戝嚑骞碬eb寮�鍙戣瑷�閮藉湪浜掔浉鍗忎綔鐫�锛岃繖绉嶅崗浣滄槸涓�绉嶄績杩涳紝鏈夋椂鍊欐垜浠�昏皟渚冨涓嶅姩浜嗭紝涓�鐩村湪鍙樺寲锛屽彲鏄摢鐭ラ亾杩欎簺鍙樺寲鍙嶈�岃В鍐充簡鎴戜滑鐨勭棝鐐癸紝涔熻浣犱範鎯簡锛岃寰椾笉鏄棝鐐逛笉鍘诲锛屼絾鏄笉鑳藉惁璁や綘瀛︿細涔嬪悗锛屼綘浼氳浠ュ墠澶棝浜嗭紝鍐嶄篃涓嶆兂鍥炲幓浜嗭紝灏卞儚瀛︿細vue锛宺eact, angular 绛夛紝鍐嶅洖鍘籮query鐪熺殑瑙夊緱鏈夌偣鐥涜嫤浜嗭紝浣嗕綘涓嶆兂瀛︿箣鍓嶏紝鎬昏寰梛Query涓嶆�庝箞鐥涳紝浣犱範鎯簡銆�
鍓嶅悗绔殑鍒嗙璁� JS鎺ユ浛浜嗛儴鍒嗗悗绔瑷�鐨勫伐浣滐紝姣斿鏁版嵁缁戝畾浜や簰绛夛紱css鎺ユ浛浜嗛儴鍒咼S宸ヤ綔锛屾瘮濡傚姩鐢诲拰鍚勭甯歌璁捐鏁堟灉绛夛紝鍚勭璇█閮藉湪鍏卞悓鍗忎綔鐫�锛屽彧鏄负浜嗚В鍐崇爜鍐滅棝鐐癸紝鎴戜滑鑳藉仛鐨勫氨鏄娊绌虹瀯涓�鐪硷紝璇曚竴璇曪紝瀛︿竴瀛� 锛屽埄姘歌繙澶т簬寮婏紝瀛︿範鐨勬椂闂翠笉浠呭彲浠ヤ负浣犲ぇ澶х殑鑺傜渷寮�鍙戞椂闂达紝鏇翠細璁╀綘鎷ユ湁鎰夋偊鐨勭紪绋嬩綋楠� 馃檪