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. 代码部署：使用 nginx 代理到云服务器 （ windows 系统）

    在部署之前我们首先要了解什么是nginx,它又可以做什么 Nginx 是高性能的 HTTP 和反向代理的web服务器,处理高并发能力是十分强大的,能经受高负 载的考验,有报告表明能支持高达 50,00 ...

  2. rein 多平台支持的超便携端口转发与内网穿透工具

    介绍 本程序主要用于进行反向代理IP地址和端口,功能类似于 nginx 的 stream 模式和rinetd 的功能:在(1.0.5)版本开始,rein支持内网穿透,这一功能类似于frp 和ngrok ...

  3. 学习vue过程中遇到的问题

    1.vue-quill-editor动态禁用 项目中把vue-quill-editor单独封装成了一个组件,通过props传递readOnly参数来设置是否禁用editor.开发中发现可以实现禁用效果 ...

  4. 『Java』StringBuilder类使用方法

    String类存在的问题 String类的底层是一个被final修饰的byte[],不能改变. 为了解决以上问题,可以使用java.lang.StringBuilder类. StringBuilder ...

  5. Ubuntu安装ssh，及失败解决方案

    网上有很多介绍在Ubuntu下开启SSH服务的文章,但大多数介绍的方法测试后都不太理想,均不能实现远程登录到Ubuntu上,最后分析原因是都没有真正开启ssh-server服务.最终成功的方法如下: ...

  6. chromium调试技巧

    调试技巧: 1.多进程不方便跟踪渲染进程,单渲染进程的设置方法     command_line->AppendSwitchWithValue("--renderer-process- ...

  7. MySQL-07-information_schema/show

    information_schema.tables视图 DESC information_schema.TABLES /** TABLE_SCHEMA ---->库名 TABLE_NAME -- ...

  8. Vue系列-03-vue-cli自动化工具

    使用Vue-CLI创建项目 安装vue-cli脚手架 Mac安装vue-cli脚手架 lichengguo@lichengguodeMacBook-Pro ~ % sudo npm install - ...

  9. 腾讯云TDSQL MySQL版 - 开发指南 二级分区

    TDSQL MySQL版 目前支持 Range 和 List 两种格式的二级分区,具体建表语法和 MySQL 分区语法类似. 二级分区语法 一级 Hash,二级 List 分区示例如下: MySQL ...

  10. MySQL自定义函数与存储过程的创建、使用、删除

    前言 日常开发中,可能会用到数据库的自定义函数/存储过程,本文记录MySQL对自定义函数与存储过程的创建.使用.删除的使用 通用语法 事实上,可以认为存储过程就是没有返回值的函数,创建/使用/删除都非 ...