1、兼容性

https://caniuse.com/#search=sticky

chrome、ios和firefox兼容性良好。

2、使用场景

sticky：粘性。粘性布局。

在屏幕范围内时，元素不受定位影响（即top、left等设置无效）；

当元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

说明：元素并没有脱离文档流。

示例一：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>position:sticky示例</title>

        <style type="text/css">

            .container {

                background: #eee;

                width: 600px;

                height: 10000px;

                margin: 0 auto;

            }

            .sticky-box {

                position: -webkit-sticky;

                position: sticky;

                height: 60px;

                margin-bottom: 30px;

                background: #ff7300;

                top: 0px;

            }

            div {

                font-size: 30px;

                text-align: center;

                color: #fff;

                line-height: 60px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="sticky-box">内容1</div>

            <div class="sticky-box">内容2</div>

            <div class="sticky-box">内容3</div>

            <div class="sticky-box">内容4</div>

        </div>

    </body>

</html>

效果：

示例二：实现头部固定的导航栏

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>position:sticky示例</title>

        <style type="text/css">

            .container {

                background: #eee;

                width: 600px;

                height: 10000px;

                margin: 0 auto;

            }

            nav {

                position: -webkit-sticky;

                position: sticky;

                top: 0;

            }

            nav {

                height: 50px;

                background: #999;

                color: #fff;

                font-size: 30px;

                line-height: 50px;

            }

            .content {

                margin-top: 30px;

                background: #ddd;

            }

            p {

                line-height: 40px;

                font-size: 20px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <nav>我是导航栏</nav>

            <div class="content">

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

            </div>

        </div>

    </body>

</html>

效果：

position sticky 定位的更多相关文章

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

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

  2. position：sticky 定位 position:fixed

    它的表现类似position:relative和position:fixed的合体,当目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像 ...

  3. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  4. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  5. position:sticky

    使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...

  6. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  7. position sticky的兼容

    position的sticky这个属性一般用于导航条,因为他在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top.left等属性无效),当该元素的位置将要移出偏移范围时,定位又会 ...

  8. CSS Position（定位）

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  9. 用position: sticky 实现粘性元素区域悬浮效果（转）

    用position: sticky 实现粘性元素区域悬浮效果 原创 2017年08月02日 20:04:13 161 在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头 ...

随机推荐

  1. FolderSync文件夹同步

    FolderSync是一款支持各大国外网盘同步的软件,目前支持 SkyDrive, Dropbox, SugarSync, Ubuntu One, Box.net, LiveDrive, HiDriv ...

  2. Get started with IDA and disassembly SH7058

    http://www.romraider.com/forum/viewtopic.php?f=25&t=6303 All of the 16-bit guidance in the follo ...

  3. mysql文件目录详解 LINUX

    http://www.cnblogs.com/yjf512/archive/2012/12/11/2813398.html

  4. spring boot JedisCluster连接redis集群配置

    配置文件 配置类 构造的时候, 可以看一下, 只有Set<HostAndPort> 参数是必须的 做了一层封装, 更方便使用 结果

  5. AES加密时抛出java.security.InvalidKeyException: Illegal key size or default parametersIllegal key size or default parameters

    使用AES加密时,当密钥大于128时,代码会抛出java.security.InvalidKeyException: Illegal key size or default parameters Il ...

  6. Delphi 跨平台 Socket 通讯库

    Delphi 跨平台 Socket 通讯库 免费开源的Delphi 跨平台 Socket 通讯库. 源码URL:https://github.com/winddriver/Delphi-Cross-S ...

  7. .Net异步编程 z

    1. 引言 最近在学习Abp框架,发现Abp框架的很多Api都提供了同步异步两种写法.异步编程说起来,大家可能都会说异步编程性能好.但好在哪里,引入了什么问题,以及如何使用,想必也未必能答的上来. 自 ...

  8. C++中二维数组的动态分配

    C++中二维数组的动态分配 作者:   来源:csdn博客   公布者:admin 时间:2009-04-23 13:55:03   点击:115 C++中一维数组的动态分配十分经常使用,但C++刚開 ...

  9. 【BZOJ】【3489】A simple rmq problem

    KD-Tree(乱搞) Orz zyf教给蒟蒻做法 蒟蒻并不会这题正解……(可持久化树套树?...Orz 对于每个点,我们可以求出pre[i],nex[i],那么询问的答案就是:求max (a[i]) ...

  10. cmake函数參数解析

    近期在迁移公司的make系统到cmake上.发现cmake的function參数非常奇怪.比如,假设我们向一个function传递list作为參数,在function中,形參会变成例如以下状况: se ...