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. Polly简介 — 2. 弹性策略

    和故障处理策略不同的是,弹性策略并不是针对委托执行过程中的异常进行处理,而是改变委托本身的行为,因此弹性策略并没有故障定义这一过程,它的处理流程为: 定义策略 应用策略 Polly对弹性策略也做了不少 ...

  2. Android 菜单键和返回键互换

    打开RE管理器找到system/usr/keylayout/ 长按qwerty.kl选择以文本编辑器查看 将里面的MENU和BACK全部替换掉 保存,退出管理器,重启手机,菜单键和返回键的位置就调换过 ...

  3. Openfire 服务器更换ip后的恢复方法

    如果你的服务器名称和mysql的地址都是使用的静态ip地址配置的,更改ip后,openfire就会开启失败,这种情况下请看下面的解决方法. 比如你的ip地址由 192.168.0.111 改为192. ...

  4. Unity知识结构总结

    前言 本篇以知识结构图的形式对Unity引擎的常用基础知识内容进行了总结和梳理. 如果你学了一点关于Unity引擎的知识,又觉得太杂乱,那么希望本篇会给你一些帮助. 对应引擎版本:Unity  4.6 ...

  5. log4j.properties打印日志信息（1）

    log4j.properties log4j.rootLogger=debug,stdout,logfile ### 把日志信息输出到控制台 ### log4j.appender.stdout=org ...

  6. window消息机制二

    消息机制 windows是一个消息驱动的系统,会有一个总的系统消息的队列,鼠标.键盘等等都会流入到这个队列中,同时会为每个线程维护一个消息队列(注意默认是有GUI调用的线程才有,对于没有GUI或者窗口 ...

  7. cocos2d-x 安卓环境配置 -转

    win7+cocos2d-x-2.1.4+vs2012环境太简单就不多说了,下面是eclipse环境 一.准备 1.eclipse+adt+sdk:adt-bundle-windows-x86_64- ...

  8. 10.2.2移动产品离线功能等具体解释----暨4月8日移动《在离线一体化》公开课Q&amp;A

    4月8日<离,或者不离,ArcGIS移动的"在离线一体化"就在那里!>移动公开课已经结束,针对公开课上粉丝们重点关注的问题,本博客进行了具体的解答.答疑主要环绕最新的R ...

  9. 《3D打印：三维智能数字化创造(全彩)》

    <3D打印:三维智能数字化创造(全彩)> 基本信息 作者: 吴怀宇 出版社:电子工业出版社 ISBN:9787121220630 上架时间:2014-1-13 出版日期:2014 年1月 ...

  10. Node.js安装备忘录

    一.准备工作 Node.js下载地址 http://nodejs.org/download/ Current version: v0.10.29 二.平台的选择 2.1 Windows平台 根据自己平 ...