css3新属性position: sticky 一分钟实现 导航栏悬停功能

css3新属性position: sticky 一分钟实现 导航栏悬停功能

http://toolusts.com/6HXL

前言

  • 公众号:前端印象
  • 不定时有送书活动,记得关注~
  • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的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,一种固定状态,所以能达到悬停的效果。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页