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. sql查询原理和Select执行顺序

    一 sql语句的执行步骤 1)语法分析,分析语句的语法是否符合规范,衡量语句中各表达式的意义. 2) 语义分析,检查语句中涉及的所有数据库对象是否存在,且用户有相应的权限. 3)视图转换,将涉及视图的 ...

  2. Ubuntu安装及一些初始操作

    目录 使用Universal-USB-Installer安装Ubuntu Ubuntu连接无线网络 Windows与Ubuntu双系统时间不一致解决办法 Ubuntu安装Sublime Text 3 ...

  3. MyBatis For .NET学习- 初识MyBatis

    MyBatis的框架. Introduction MyBatis本是apache的一个开源项目iBatis,2010年这个项目由 apache software foundation迁移到了googl ...

  4. NIO复习01

    NIO 概述: 1. Java NIO 由以下几个核心部分组成:Channels       Buffers           Selectors 2. 主要Channel的实现:FileChann ...

  5. 通过自动回复机器人学Mybatis：搭建核心架构

    imooc视频学习笔记 ----> URL:http://www.imooc.com/learn/154 MessageDao.java package com.imooc.dao; impor ...

  6. Python3.x：日期库dateutil简介

    Python3.x:日期库dateutil简介 安装 pip install python-dateutil 关于parser #字符串可以很随意,可以用时间日期的英文单词,可以用横线.逗号.空格等做 ...

  7. 高亮显示UILabel中的子串

    I. 用户在搜索框中,输入关键字进行检索时,APP对搜索结果进行显示,有以下两种情况: 1. 匹配一次,如检索关键字为人名 这种情况,实现比较容易.写一个UILabel的category, 用rang ...

  8. struts2——多文件上传

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. Java中sleep()与wait()的区别

    第一种解释: 功能差不多,都用来进行线程控制,他们最大本质的区别是:sleep()不释放同步锁,wait()释放同步缩.       还有用法的上的不同是:sleep(milliseconds)可以用 ...

  10. NumPy统计函数

    NumPy - 统计函数 NumPy 有很多有用的统计函数,用于从数组中给定的元素中查找最小,最大,百分标准差和方差等. 函数说明如下: numpy.amin() 和 numpy.amax() 这些函 ...