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. mybatis动态sql总结

    前言 平时在开发中,针对动态sql这块目前是薄弱点,自己根据官网在对应项目边测试边写博客,此篇只是为了加深动态sql的熟练度,有不到之处敬请批评指正! 1.if 使用动态 SQL 最常见情景是根据条件 ...

  2. 搭建NFS文件共享

    1.概述: NFS(Network File System)意为网络文件系统,它最大的功能就是可以通过网络,让不同的机器不同的操作系统可以共享彼此的文件.简单的讲就是可以挂载远程主机的共享目录到本地, ...

  3. 代码部署：使用 nginx 代理到云服务器 （ windows 系统）

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

  4. 使用POI导出Word（含表格）的实现方式及操作Word的工具类

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...

  5. Java 多线程与并发【原理第二部分笔记】

    Java 多线程与并发[原理第二部分笔记] 什么是Java内存模型中的happens-before Java内存模型,即JMM,本身是一种抽象的概念,并不是真实存在的,他描述的是一组规则或者说是一种规 ...

  6. MySQL索引篇之索引存储模型

      本文重点介绍下索引的存储模型 二分查找   给定一个1~100的自然数,给你5次机会,你能猜中这个数字吗? 你会从多少开始猜?   为什么一定是50呢?这个就是二分查找的一种思想,也叫折半查找,每 ...

  7. SSH以及ROS远程登录设置保姆级教程

    本文用来实现在同一局域网内的两台计算机之间的相互通信,实现一台计算机登录到另一台计算机,本文基于SSH来实现. 1.SSH简介 Secure Shell(SSH)是由 IETF(The Interne ...

  8. asp.net core的输入模型验证

    数据验证特性RequiredAttribute:表示数据不能为空RegularExpressionAttribute:正则校验CompareAttribute:和某个属性比较RangeAttribut ...

  9. C# 获得文件的执行路径的方法

    var path = System.Reflection.Assembly.GetEntryAssembly().Location;

  10. 【springcloud】常见面试题总结

    1.springcloud与dubbo的区别? https://jingyan.baidu.com/article/b0b63dbf3784294a483070fa.html 1.1 springcl ...