css-position之fixed vs sticky
css-position之fixed vs sticky
fixed(固定定位)
元素相对于浏览器窗口是固定的,即使是窗口滚动,元素也是固定的
sticky(粘性定位)
基于用户滚定动来进行定位的,相当于relative定位 fixed定位的结合体
当未超过阈值的时候,他的行为就像relative,当超过特定阈值是他的行为就像fixed。
阈值是left,right,top,bottom(必须制定其一,才能使粘性定位生效,否则其行为与relative相同)
sticky事例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>sticky</title> 6 <style> 7 div .sticky { 8 9 position: sticky; 10 top: 0; 11 padding: 5px; 12 background-color: #cae8ca; 13 border: 2px solid #4CAF50; 14 } 15 </style> 16 </head> 17 <body> 18 19 <p>尝试滚动页面。</p> 20 21 22 <div class="sticky">我是粘性定位!</div> 23 24 <div style="padding-bottom:2000px"> 25 <p>滚动我</p> 26 <p>来回滚动我</p> 27 <p>滚动我</p> 28 <p>来回滚动我</p> 29 <p>滚动我</p> 30 <p>来回滚动我</p> 31 </div> 32 33 </body> 34 </html>