position:sticky,Chrome新版本已经做了支持。sticky的中文翻译是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

语法：

header {

    position: -webkit-sticky;

    position: sticky;

    top:;

}

看个类似通讯录滚动的例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Examples</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

    <link href="" rel="stylesheet">

    <style type="text/css">

    article {

        max-width: 600px;

        margin: 1em auto;

    }

    article h4,

    article footer {

        position: -webkit-sticky;

        position: sticky;

    }

    article h4 {

        margin: 2em 0 0;

        background-color: #e68521;

        color: #fff;

        padding: 10px;

        top: 0;

        z-index: 1;

    }

    article content {

        display: block;

        background-color: #38C5A3;

        position: relative;

        padding: 1px 10px;

    }

    article footer {

        background-color: #f0f3f9;

        padding: 10px;

        bottom: 50vh;
　　　　　/* 隐藏在.content后面，模拟看不到的效果 */

        z-index: -1;

    }

</style>

</head>

<body>

    <article>

        <!-- 1、和position:fixed;有着本质的区别position: sticky;完全受制于父级元素们。 -->

        <!-- 2、父级元素不能有任何overflow: visible;以外的任何overflow设置，否则没有效果。
　　　　　　如果你设置了，会改变滚动容器的原有表现，即使没出现滚动条。
　　　　　　所以，如果你设置了sticky，但没生效，你可以检查父元素们是否设置了overflow -->

        <!-- 3、同一个父元素中，多个相同定位的sticky元素，会重叠，
　　　　　　　　所以，你要实现类似通讯录导航的效果，注意把每个大类（A、B、C...）分别放在同级的不同子级中，如下面的例子 -->

        <!-- 4、sticky不仅可以设置top值，基于滚动容器上边缘定位，还可以设置bottom,也就是相对于底部、左侧、右侧sticky -->

        <section>

            <h4>A</h4>

            <content>

                <p>阿姨</p>

                <p>阿三</p>

                <p>阿四</p>

            </content>

            <footer>A结束</footer>

        </section>

        <section>

            <h4>B</h4>

            <content>

                <p>B一</p>

                <p>B二</p>

                <p>B三</p>

            </content>

            <footer>B结束</footer>

        </section>

        <section>

            <h4>C</h4>

            <content>

                <p>C一</p>

                <p>C二</p>

                <p>C三</p>

            </content>

            <footer>C结束</footer>

        </section>

        <section>

            <h4>D</h4>

            <content>

                <p>D一</p>

                <p>D二</p>

                <p>D三</p>

            </content>

            <footer>D结束</footer>

        </section>

        <section>

            <h4>E</h4>

            <content>

                <p>E一</p>

                <p>E二</p>

                <p>E三</p>

            </content>

            <footer>E结束</footer>

        </section>

        <section>

            <h4>F</h4>

            <content>

                <p>F一</p>

                <p>F二</p>

                <p>F三</p>

            </content>

            <footer>F结束</footer>

        </section>

    </article>

</body>

</html>

可以在移动端，尽情的戏耍啦~~~

你不知道的sticky的更多相关文章

  1. MySQL 系列（三）你不知道的 视图、触发器、存储过程、函数、事务、索引、语句

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 第三篇:MySQL 系列(三)你不知道的 视图.触发器.存储过程.函数 ...

  2. MySQL 系列（二） 你不知道的数据库操作

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 本章内容: 查看\创建\使用\删除 数据库 用户管理及授权实战 局域网 ...

  3. 《你不知道的JavaScript》整理（二）——this

    最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,这次研究了一下“this”. 当一个函数被调用时,会创建一个活动记录(执行上下文). 这个记录会包含函 ...

  4. 《你不知道的JavaScript》整理（一）——作用域、提升与闭包

    最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 ...

  5. position:sticky的兼容性尝试

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

  6. APUE学习之三个特殊位 设置用户ID（set-user-ID），设置组ID（set-group-ID），sticky

    设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky   set-user-ID: SUID      当文件的该位有设置时,表示当该文件被执行时,程序具有文件 ...

  7. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  8. 基于sticky组件，实现带sticky效果的tab导航和滚动导航

    上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...

  9. 你不知道的Javascript（上卷）读书笔记之一 ---- 作用域

    你不知道的Javascript(上卷)这本书在我看来是一本还不错的书籍,这本书用比较简洁的语言来描述Js的那些"坑",在这里写一些博客记录一下笔记以便消化吸收. 1 编译原理 在此 ...

随机推荐

  1. django 通过orm操作数据库

    Django Model 每一个Django Model都继承自django.db.models.Model 在Model当中每一个属性attribute都代表一个database field 通过D ...

  2. ajax异步请求返回对象

    使用ajax异步请求返回一个对象. java code: @RequestMapping({"getAstSingleWheelImg_bbs"+Constant.JSON}) @ ...

  3. rails timeout 异常

    发现经常有”超时“的错误信息,如/usr/lib/ruby/1.8/timeout.rb:54:in `rbuf_fill': execution expired (Timeout::Error),恩 ...

  4. HDFS JAVA API介绍

    注:在工程pom.xml 所在目录,cmd中运行 mvn package ,打包可能会有两个jar,名字较长的是包含所有依赖的重量级的jar,可以在linux中使用 java -cp 命令来跑.名字较 ...

  5. Oracle数据安全（四）j角色管理

    一.角色管理的概述 1.角色的概念 为了简化数据库权限的管理,在Oracle数据库中引入了角色的概念.所谓的角色就是一系列相关权限的集合. 2.角色的特点 在数据库中,角色的名称必须是唯一的,不能与用 ...

  6. C++中char类型的十六进制字符串转换成字节流

    如a[5]="1234"转换成a[5]={0x12,0x34} 代码如下: void HexStrToByte(const char* source, unsigned char* ...

  7. React Native之持久化存储（AsyncStorage、react-native-storage）的使用

    AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...

  8. Redis 后台运行

    编辑配置文件 vim {redis_home}/redis.conf 修改daemonize  (默认为no,修改为yes) 启动redis{redis_home}/src/redis-server ...

  9. Caffe python利用classify.py实现对单通道(灰度图)的数据进行分类

    比如你在mnist的prototxt中定义图输入是单通道的,也就是channel=1,然后如果直接调用classify.py脚本来测试的话,是会报错,错误跟一下类似. Source param sha ...

  10. java基础(7)--方法

    方法 Math.sqrt() 取平方 Math.pow(2,3) 2的3次方 方法(Method),就是数学函数(Function). 业务方面: 是功能,是动作,一般采用动词命名. 数据层面:是利用 ...