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

简介: 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如csdn网站:那么你们都是使用什么方法实现的呢?今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定。

实现悬停的代码


你只需要找到你导航栏的标签,给他添加以下样式,就可以实现导航栏悬停功能:


接下来先是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>


      然后是实际效果图:


      ab6abf2b1c7766b7057f343e5328b696.jpg


      是不是特别的简单呢?其实原理就是,当标签离浏览器顶部的距离没有达到我们设置的top值时,该标签都处于position: relative 的状态,占据文本流存在于内容中;当标签离浏览器顶部的距离达到我们设置的top值时,该标签处于position: fixed,一种固定状态,所以能达到悬停的效果。


      关注我,不迷路~

      相关文章
      |
      18天前
      |
      前端开发
      CSS中的边框属性:border、border-width、border-color、border-style 详解
      CSS中的边框属性:border、border-width、border-color、border-style 详解
      120 44
      |
      18天前
      |
      前端开发
      CSS中的display属性:布局控制的关键
      CSS中的display属性:布局控制的关键
      122 42
      |
      18天前
      |
      前端开发 开发者
      CSS列表属性:list-style系列属性详解
      CSS列表属性:list-style系列属性详解
      116 40
      |
      14天前
      |
      前端开发 容器
      你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
      你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
      15 3
      你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
      |
      1天前
      |
      前端开发
      学习css的clip-path属性
      【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
      21 0
      学习css的clip-path属性
      |
      14天前
      |
      Web App开发 前端开发 JavaScript
      css【详解】—— content属性(含css计数器)
      css【详解】—— content属性(含css计数器)
      8 3
      |
      14天前
      |
      前端开发
      css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
      css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
      17 1
      |
      14天前
      |
      前端开发 容器
      css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
      css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
      13 1
      |
      18天前
      |
      前端开发 搜索推荐 UED
      探索CSS中的cursor鼠标属性
      探索CSS中的cursor鼠标属性
      17 5
      |
      17天前
      |
      前端开发 JavaScript
      使用JavaScript动态更改元素的CSS属性
      【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
      24 3