css3 position定位—— sticky 定位
一.概念
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
二.实例场景运用
一.头部滚动后固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头部滚动后固定定位</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
AI写代码
xml
结果演示：
二.到左侧底部时，右侧边滚动，左侧固定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>.到左侧底部时，右侧边滚动，左侧固定</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: -100vh;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
.left,
.right {
width: 50%;
float: left;
box-sizing: border-box;
}
.right .bottom {
padding-top: calc(100vh - 60px);
line-height: 30px;
}
.left .bottom {
color: #333;
margin-top: calc(100vh - 30px);
line-height: 30px;
height: 100vh;
background-color: red;
}
.left {
background-color: #ff01c7;
border: 2px solid #e64133;
}
.right {
background-color: #40abf2;
border: 2px solid #0431fa;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::before {
clear: both;
height: 0;
}
.clearfix::after {
clear: both;
height: 0;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="left sticky">
我是粘性定位如果左侧滚动完，让我距离顶部一个屏幕宽度fixed
<div class="bottom">我是底部</div>
</div>
<div class="right">
<p class="bottom">来回滚动我第一屏</p>
<p class="bottom">来回滚动我第二屏</p>
<p class="bottom">来回滚动我第三屏</p>
<p class="bottom">来回滚动我第四屏</p>
<p class="bottom">来回滚动我第五屏</p>
</div>
</div>
</body>
</html>
AI写代码
xml
结果演示：
三.总结
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置
css3 position定位—— sticky 定位的更多相关文章
- position：sticky 定位 position:fixed
它的表现类似position:relative和position:fixed的合体,当目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像 ...
- CSS布局：sticky定位
stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里:或者,当它发现自己可以跟随“正常”文档流而脱离sticky位置时,就果断离开从而加入文档流. 代码与效果如下: < ...
- 小程序中，设置Sticky定位，距离上面会有一个缝隙
近日,在小程序中使用sticky定位实现吸顶效果,不料入了一个大坑. 定位后,距离有position: relative:的上级元素有个1px大小的缝隙条,透过缝隙,滑动时可看到定位标题下的内容. 此 ...
- 关于CSS的粘性定位sticky失效问题
CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...
- position属性sticky和fixed的区别比较
position属性之fixed fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位. <!DOCTYPE h ...
- HTML四种定位-固定定位
固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件
1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...
- 承载地图的div如果隐藏再显示，则定位时会定位到页面左上角
承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.
- position sticky 定位
1.兼容性 https://caniuse.com/#search=sticky chrome.ios和firefox兼容性良好. 2.使用场景 sticky:粘性.粘性布局. 在屏幕范围内时,元素不 ...
- css3——position定位详解
最近热衷于前端的开发,因为突然发现虽然对于网站.应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象.最近在开发当中发现以前对于css中的position的理解 ...
随机推荐
- 【教程】Windows10系统激活
Windows10系统激活 一.找一个激活码 到百度搜索,筛选发表日期在最近一个月或者一周之内的 二.以管理员身份打开cmd 按Win+R键,输入cmd打开命令行窗口 按Ctrl+Shift+Esc键 ...
- Redis 应用场景之短信验证码
应用场景 以 OSChina 账号注册 为例...讲错了请留言批评指正... 逻辑场景 用户操作: 用户输入手机号, 然后点击获取验证码. 前端逻辑: ajax 发起请求, 参数带上手机号. 后端逻辑 ...
- 学习EXTJS6（10）面向对象的基础框架-2【统一的组件模型】很重要
用到ExtJS,UNIGUI是以ExtJS为基础的框架.因此掌握基础组件模型太重要了.确实就是让自己知道其所以然. Ext中所有可视组件都继承自Ext.Component. 1.Ext.Compone ...
- FireDAC的数据库的FDConnect
通常,我们设置一个ini文件,按照FDConnection的ini格式要求配置好.然后直接调用通知连接数据库是否OK. FireDAC可以通过FDManager管理ini文件简单实现.即由FDConn ...
- Kubernetes基础教程-通过部署Nginx快速学习基本使用命令
1.验证节点信息 1.1.查看控制平面组件的状态 [root@linux-servertwo software]# kubectl get cs Warning: v1 ComponentStatus ...
- MySurvey 问卷调查, 一个简单的Biwen.QuickApi示例项目
MySurvey 项目 很久没更新我的博客了,之前开发的Biwen.QuickApi微框架 一直没有开发一个示例项目,最近有点时间,写了一个示例项目稍微介绍下 项目简介 这是一个基于 Biwen.Qu ...
- DevOps常用工具网址
Linux基础和命令: shell语法查询: http://www.linux6.comhttps://www.tutorialspoint.com/linux_admin/index.htm 正则表 ...
- 深入理解Java虚拟机-线程安全与锁优化
线程安全级别 级别 描述 示例 不可变(Immutable) 对象状态不可变,天然线程安全. String.Integer 绝对线程安全 所有操作都线程安全(Java 中极少见). Vector(通过 ...
- px转rem适配方案之postcss-pxtorem
一.安装 npm install postcss-pxtorem --save-dev 二.增加postcss.config.js文件 在目录文件下增加postcss.config.js并添加相关配置 ...
- eolinker返回值正则处理后设置为全局变量
特别注意:需要使用全局变量前务必阅读本链接https://www.cnblogs.com/becks/p/13713278.html 如下图,返回值content内,需要取出验证码后面的数字 预处理, ...