PC导航栏吸顶效果

[{"insert":"1 粘性定位做法"},{"attributes":{"header":4},"insert":"\n"},{"insert":"使用自定义样式 position: sticky 设置粘性定位，需要指定 top、left、bottom、right 其中至少一个作为位置值，位置值单位可以为 px 和 %\n\n"},{"insert":{"image":"R10580997-be1ce9c45840741f598fd8baa612344f_6762_267_167.png"}},{"insert":"\n\n设置了粘性定位的元素会在滚动过程中固定于第一个设置了滚动或者剪切的父元素上\n\n"},{"insert":{"image":"R10580997-d0abf9e18c529390d83ab32d4a8973be_7372_271_164.png"}},{"insert":"\n\n2 固定定位做法"},{"attributes":{"header":4},"insert":"\n"},{"insert":"使用自定义样式 position: fixed 设置固定定位，需要指定 top、left、bottom、right 至多两个作为位置值，位置值单位可以为 px 和 %\n\n"},{"insert":{"image":"R10580997-14d64fc9492a3610fa1e9fbe5e6853bc_8042_288_172.png"}},{"insert":"\n\n由于固定定位会脱离文档流，所以元素无法起到撑开页面的效果，需要设置一个父元素进行占位\n\n"},{"insert":{"image":"R10580997-1217ce1387f8868a94c9114542ba7b61_4661_312_88.png"}},{"insert":"\n\n而元素会相对于屏幕进行定位，宽高百分比依据对象也会转移至屏幕，所以如果设置宽高为撑开或百分比的话需要事先记录应有的宽高，避免显示错误\n\n"},{"insert":{"image":"R10580997-3d9ca6b4a2228532f8b3f37048bf997e_7445_357_109.png"}},{"insert":"\n\n现在只要监听滚动动作，在滚动至导航栏后设置固定定位即可\n\n"},{"insert":{"image":"R10580997-a2cde7e187d3504d0f8663846eaed261_12510_790_132.png"}},{"insert":"\n"}]