css3新屬性position: sticky 一分鐘實現 導航欄懸停功能

css3新屬性position: sticky 一分鐘實現 導航欄懸停功能

• 前言
• 正文

前言

想必不少前端小夥伴常常會在開發中遇到這樣一個需求，就是在下劃時，導航欄懸停在屏幕最上方，例如我們的csdn：

那麼大家都是使用什麼方法實現的呢？今天咱們就用css3的一個新的屬性position: sticky 來實現這個功能吧，堅持看下去，就只需一分鐘就能搞定。

正文

你只須要找到你導航欄的標籤，給他添加如下樣式，就能夠實現導航欄懸停功能：

• 標籤內容

<div class="top"></div>
<div class="tabber">導航欄</div>
<!--如下內容忽略-->
<p>網頁內容1</p>
<p>網頁內容2</p>
<p>網頁內容3</p>
<p>網頁內容4</p>
<p>網頁內容5</p>
<p>網頁內容6</p>
<p>網頁內容7</p>
<p>網頁內容8</p>
<p>網頁內容9</p>
<p>網頁內容10</p>
<p>網頁內容11</p>
<p>網頁內容12</p>
<p>網頁內容13</p>
<p>網頁內容14</p>
<p>網頁內容15</p>
<p>網頁內容16</p>
<p>網頁內容17</p>
<p>網頁內容18</p>
<p>網頁內容19</p>
<p>網頁內容20</p>
<p>網頁內容21</p>
<p>網頁內容22</p>
<p>網頁內容23</p>
<p>網頁內容24</p>
<p>網頁內容25</p>
<p>網頁內容26</p>
<p>網頁內容27</p>
<p>網頁內容28</p>
<p>網頁內容29</p>
<p>網頁內容30</p>
<p>網頁內容31</p>
<p>網頁內容32</p>
<p>網頁內容33</p>
<p>網頁內容34</p>
<p>網頁內容35</p>
<p>網頁內容36</p>
<p>網頁內容37</p>

• 樣式（重點）

<style> .top{
            height: 600px;
            background: lightgreen;
        }
    .tabber{
         height: 50px;
         background: yellow;
         text-align: center;
         font-size: 30px;
         /*只需添加這兩個樣式就能夠實現懸停*/
         position: sticky;           //設置position: sticky樣式
         top: 0;                     //top: 0 表示當該標籤頂部離瀏覽器只有0px的距離時，一直懸浮在窗口中
     }
</style>

• 效果圖
  是否是特別的簡單呢？ 其實原理就是，當標籤離瀏覽器頂部的距離沒有達到咱們設置的top值時，該標籤都處於position: relative 的狀態，佔據文本流存在於內容中； 當標籤離瀏覽器頂部的距離達到咱們設置的top值時，該標籤處於position: fixed，一種固定狀態，因此能達到懸停的效果。