实现悬停的代码
你只需要找到你导航栏的标签，给他添加以下样式，就可以实现导航栏悬停功能：
接下来先是html标签代码内容：
<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>
然后是css样式内容：
<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，一种固定状态，所以能达到悬停的效果。
关注我，不迷路~
