前言

想必很多前端小伙伴经常会在开发中遇到这样一个需求，就是在下划时，导航栏悬停在屏幕最上方，例如咱们的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，一种固定状态，所以能达到悬停的效果。