想必不少前端小伙伴常常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如我们的csdn:
那么大家都是使用什么方法实现的呢?今天咱们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定。css
你只须要找到你导航栏的标签,给他添加如下样式,就能够实现导航栏悬停功能: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>
<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>