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. 05.表达式目录树Expression

    参考文章 https://www.cnblogs.com/xyh9039/p/12748983.html 1. 基本了解 1.1 Lambda表达式 演变过程 using System; namesp ...

  2. Linux下MySQL多实例部署记录

    什么是MySQL多实例 简单地说,Mysql多实例就是在一台服务器上同时开启多个不同的服务端口(3306.3307),同时运行多个Mysql服务进程,这些服务进程通过不同的socket监听不同的服务端 ...

  3. NOIP 模拟 $16\; \rm God Knows$

    题解 \(by\;zj\varphi\) 对于这道题,不难想到可以用 \(dp\),就是求一个最小权极长上升子序列 设 \(dp_i\) 表示最后一个选 \(i\) 时,覆盖前 \(i\) 条边的最小 ...

  4. C# 计时器用法（DispatcherTimer、System.Timers.Timer、System.Threading.Timer）

    首先,我觉得三种计时器最大的区别是:DispatcherTimer触发的内容会直接转到主线程去执行(耗时操作会卡住主线程),另外两个则是在副线程执行,如果需要修改界面,则需要手动转到主线程. Disp ...

  5. cmd进入pycharm所创建的虚拟环境

    进入cmd命令,进入虚拟环境所在文件夹.(pycharm每创建一个新项目就会创建一个虚拟环境,位于项目下venv下Script) E:\virtualenv\crawl1\Scripts>act ...

  6. 使用Hugo和GitHub搭建博客

    折腾了几天博客的框架终于搭建起来了.研究了一番之后,最终还是选择使用Hugo和GitHub来搭建博客.本文介绍了如何使用Hugo来搭建静态博客网站,并将其部署在GitHub上.使用https://&l ...

  7. 如何打一个RPM包

    如何打一个RPM包 参考链接:RPM打包原理.示例.详解及备查 前言 本文只是一个RPM安装的例子,并没有对RPM做比较详尽的叙述,更为详尽的讲解,可以在上面的链接中找到. RPM是啥? RPM(Re ...

  8. springcloud超时重试机制的先后顺序

    https://blog.csdn.net/zzzgd_666/article/details/83314833

  9. JobExecutionContext中的JobDataMapjob与Detail与Trigger中的JobDataMapjob

    public static void main(String[] args) { //配置模式 build模式 //1.实例一个JOB JobDetail jobDetail = JobBuilder ...

  10. Windows10下MySQL的安装

    简单介绍一下MySQL的安装 官方网址:https://www.mysql.com/downloads/ 1.找到MySQL Community Edition (GPL) (注:GPL版本为开源,非 ...