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 AES512加密算法

    AES - 高级加密标准: 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这 ...

  2. C语言自带快速排序对比插入排序

    #include <stdio.h> #include <stdlib.h> #include <time.h> void getRandomArr (int ar ...

  3. go——切片

    切片(slice)可以看作一种对数组的包装形式,它包装的数组为该切片的底层数组.反过来讲,切片是针对其底层数组中某个连续片段的描述,下面的代码声明了一个切片类型的变量: var ips = []str ...

  4. Web框架简介

    Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  5. Spring AOP（2）

  6. Curator学习

    Curator是对zookeeper的高级封装. 考虑到使用它来开发zookeeper应用的方便,特此来记录总结学习与开发使用过程的问题. 1. curator-framework Curator F ...

  7. 谈谈RMQ问题

    没用的话:好像好久没更博了,无聊就讲讲算法吧(主要找不到水题). 感觉针对初学者,老师教这个算法时没怎么懂,最近(大概1.2个月前吧)老师又教了lca(最近公共祖先,额,可以百度,我就不讲了,可能以后 ...

  8. linux tzselect 设置时区

    date -R 检查时间 tzselect 按照提示逐步设置 //这里演示的是设置东八区 TZ='Asia/Shanghai'; export TZ 添加到/etc/profile source pr ...

  9. Java通过JDBC操作Hive

    http://www.cnblogs.com/netbloomy/p/6688670.html 0.概述 使用的都是CLI或者hive –e的方式仅允许使用HiveQL执行查询.更新等操作.然而Hiv ...

  10. JavaWeb -- Struts2 验证框架

    1. 验证框架 示例 表单提交Jsp, reg.jsp <%@ page language="java" contentType="text/html; chars ...