sticky简述

sticky 是css定为新增的属性；可以说是相对定位relative和固定定位fixed的结合；
它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素的距离其父元素的距离达到 sticky 粘性定位 要求时；
position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。
使用条件：
    1. 父元素不能设置 overflow:hidden; 或者 overflow:auto;  属性；
    2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；
    3. 父元素的高度不能低于sticky 元素的高度；
    4. sticky 元素仅在其父元素内生效；
基本使用示例 : (如果下面这个demo你能正常运行，说明当前浏览器是支持的)

　　兼容性一览：https://caniuse.com/#feat=css-sticky

111111
没错，我就是sticky，请向上滚动
2222222
3333333
444444444
55555555555
 1 <!DOCTYPE html>

 2     <html lang="en">

 3     <head>

 4         <meta charset="UTF-8">

 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">

 7         <title>Document</title>

 8         <style>

 9             *{margin: 0;padding: 0;}

10         </style>

11     </head>

12 <body>

13     <div style="height:300px;background:skyblue;">111111</div>

14     <div style="position:sticky;top:0px;height:30px;background:pink;">没错，我就是sticky</div>

15     <div style="height:300px;background:skyblue;">2222222</div>

16     <div style="height:300px;background:skyblue;">3333333</div>

17     <div style="height:300px;background:skyblue;">444444444</div>

18     <div style="height:300px;background:skyblue;">55555555555</div>

19 </body>

20 </html>

sticky -- position定位属性sticky值之粘性定位；的更多相关文章

  1. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  2. sticky，粘性定位

    position:sticky,粘性定位:可以说是relative和fixed的结合: 滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置. 使用: #id ...

  3. position属性sticky和fixed的区别比较

    position属性之fixed fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位. <!DOCTYPE h ...

  4. 粘性定位 sticky

    position:sticky  粘性定位 top:200px 这是他的阈值,意思是当我们页面滚动到 200 像素的使用,我们的元素会自动变成固定定位,不到200像素的时候,我们的元素走的是相对定位 ...

  5. 关于CSS的粘性定位sticky失效问题

    CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...

  6. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. position 的属性值

    理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky |  initial | inhe ...

  8. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  9. CSS position定位属性

    css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...

随机推荐

  1. .NET 6 预览版 7：新功能已完成 ，将专注于改进

    .NET 团队的项目经理 Richard Lander在宣布 .NET 6 Preview 7 时说:"这是 .NET 预览的又一季的结束.", 中文翻译:.NET 6 预览版 7 ...

  2. Matlab 使用filter求解系统响应

    MATLAB 提供了函数filter,可以实现差分方程的递规求解. 设差分方程的形式为\(a_0y(n) + a_1y(n-1) + \cdots + a_my(n-m)=b_0x(n)+b_1x(n ...

  3. SpringMVC学习09（文件的上传和下载）

    文件上传和下载 准备工作 文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况 ...

  4. rabbitMQ通过@RabbitListener和配置文件XML创建exchange及队列绑定关系

    1.@RabbitListener 2.配置文件 <rabbit:fanout-exchange name="fanoutExchange" xmlns="http ...

  5. SpringBoot-静态资源加载-源码

    目录 静态资源映射规则 什么是webjars 呢? 第二种静态资源映射规则 参考链接 静态资源映射规则 SpringBoot中,SpringMVC的web配置都在 WebMvcAutoConfigur ...

  6. MySQL-03-基础管理

    用户和权限管理 用户管理 作用:登录,管理数据库逻辑对象 定义:用户名@'白名单' 白名单支持的方式 wordpress@'10.0.0.%' wordpress@'%' wordpress@'10. ...

  7. [源码解析] 机器学习参数服务器Paracel (3)------数据处理

    [源码解析] 机器学习参数服务器Paracel (3)------数据处理 目录 [源码解析] 机器学习参数服务器Paracel (3)------数据处理 0x00 摘要 0x01 切分需要 1.1 ...

  8. 【Vulhub】Rsync未授权访问漏洞复现

    Rsync未授权访问 Rsync简介 rsync,remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接等附加信息 ...

  9. 通过Mssql提权的几种姿势

    本文记录针对SQL Server数据库,在拿到shell之后进行提权的5种方法. 一. xp_cmdshell提权 上面的数据库连接需要知道sa的密码,连接之后,在下面的sql命令处执行: exec ...

  10. hdmi 随笔

    从图片来看,每张图片开始传输的是45像素的垂直同步, 1.控制数据贯穿所有时间,没个不是控制数据的传输都被控制数据包围.控制数据还要通过控制位指示,下一个数据是数据岛还是视频信号. 2.terc4 全 ...