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. Java并发（4）：ThreadLocal

    一.对ThreadLocal的理解 ThreadLocal是java.lang包中的一个类,很多地方叫做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多.可能很多朋友都知道ThreadLoca ...

  2. LeetCode：验证二叉搜索树【98】

    LeetCode:验证二叉搜索树[98] 题目描述 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当 ...

  3. js验证真实姓名

    var regName = /^[\u4e00-\u9fa5]{2,4}$/; if (!regName.test(examinee.name)) { wx.showToast({ title: &q ...

  4. hibernatetemplate find条件查询方法

    一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有Use ...

  5. 94. Binary Tree Inorder Traversal（二叉树中序遍历）

      Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary t ...

  6. Kotlin学习记录1

    参考我的博客:http://www.isedwardtang.com/2017/09/02/kotlin-primer-1/

  7. C#中各种数据类型可以表示的数据的范围

    C#中各种数据类型可以表示的数据的范围 BOOL型为int型,一般认为占4个字节,取值TRUE/FALSE/ERROR. sbyte型为有符号8位整数,占1个字节,取值范围在-128 - 127之间. ...

  8. 判断一个对象是否有new

    C++语言中,对象没有空和不空的概念,只有对象指针才有空和不空的概念 判断对象指针是否为空只需要和NULL常量进行比较即可 如果相等,则为空,否则不为空 另外对象虽然没有空和不空的概念,但是有有效和无 ...

  9. Centos6.5安装python2.7与pip

    安装Python2.7 安装环境 [root@localhost1 ~]# cat /etc/redhat-release CentOS release 6.5 (Final) [root@local ...

  10. caffe python lmdb读写

    caffe中可以采取lmdb健值数据库的方式向网络中输入数据. 所以操作lmdb就围绕"键-值"的方式访问数据库就好了. Write 我们可以采用cv2来读入自己的图像数据,采用d ...