css3新属性position: sticky 一分钟实现 导航栏悬停功能
前言
想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的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,一种固定状态,所以能达到悬停的效果。
css3新属性position: sticky 一分钟实现 导航栏悬停功能的更多相关文章
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- 粘性固定属性 -- position:sticky
概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
- css3新属性运用
1.css3新单位vh.vw,这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px.同理,如果显示窗口宽度为750px ...
- CSS3新属性注释及实例
这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
随机推荐
- Docker 入门教程(2)——image与container
image镜像 Definition of: image Docker images are the basis of containers. An Image is an ordered colle ...
- Netty 学习笔记(1) ------ Hello World
服务端启动流程 package com.example.netty; import com.example.netty.handler.HelloServerHandler; import io.ne ...
- ✨Shell脚本实现Base64 加密解密
加密算法 # !/bin/bash # 全局变量 str="" base64_encode_string(){ # 源数据 source_string=$1 echo " ...
- Java SE基础知识
Java SE面试题 目录 Java SE基础 基本语法 数据类型 关键字 面向对象 集合 集合类概述 Collection接口 List Set Map Java SE基础 基本语法 数据类型 Ja ...
- Fortify Audit Workbench 笔记 Privacy Violation 隐私泄露
Privacy Violation 隐私泄露 Abstract 对各种机密信息处理不当,如客户密码或社会保障号码,会危及到用户的个人隐私,这是一种非法行为. Explanation Privacy V ...
- js POST调用api接口时,由于OPTIONS请求导致服务器异常
1.学习心得 当你搜到这个问题时,就表示你已经知道了脚本POST请求接口时,会先执行一次OPTIONS类型的请求.至于为什么会这样,在此就不做描述了,想知道的小伙伴可以查一下:本文主要将我在现实中遇到 ...
- Python File fileno() 方法
概述 fileno() 方法返回一个整型的文件描述符(file descriptor FD 整型),可用于底层操作系统的 I/O 操作.高佣联盟 www.cgewang.com 语法 fileno() ...
- PHP fstat() 函数
定义和用法 fstat() 函数返回关于一个打开的文件的信息. 该函数将返回一个包含下列元素的数组: [0] 或 [dev] - 设备编号 [1] 或 [ino] - inode 编号 [2] 或 [ ...
- luogu P4095 [HEOI2013]Eden 的新背包问题 多重背包 背包的合并
LINK:Eden 的新背包问题 就是一个多重背包 每次去掉一个物品 询问钱数为w所能买到的最大值. 可以对于每次Q暴力dp 利用单调队列优化多重背包 这样复杂度是Qnm的. 发现过不了n==10的点 ...
- SpringCloud启动异常Stopping service [Tomcat]
问题场景: 领导让我搭建一套Jenkins实现自动化部署,项目是SpringCloud项目,配置的过程很顺利,给我提供了一台服务器做部署测试(服务器以前是做dev环境,很长时间没人用了) 我把所有项目 ...