粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。设置该属性的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
以前我们在实现诸如“固定导航菜单在屏幕顶部”的特效只能通过 Javascript 监听页面滚动事件,然后判断导航距离顶部的距离,为其动态添加position:fixed
属性,这样实现一是比较麻烦,二是效果也不完美,滚动时容易出现抖动。
在 Css 3 中,我们可以使用 sticky 属性实现元素粘性定位,代码简单易懂,效果也更好,示例代码如下,重点就是红色代码部分。
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .fixed{ line-height: 40px; display: flex; position: -webkit-sticky; position: sticky; top: 0; left: 0; } .fixed li{ flex: 1; text-align: center; background-color: #61b0ef; } ul{ padding: 0; } li{ list-style: none; } </style> </head> <body> <ul> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> </ul> <ul class="fixed"> <li>tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> </ul> <ul> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> </ul> </body> </html>