你不知道的sticky

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的更多相关文章

MySQL 系列（三）你不知道的视图、触发器、存储过程、函数、事务、索引、语句
第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决第二篇:MySQL 系列(二) 你不知道的数据库操作第三篇:MySQL 系列(三)你不知道的视图.触发器.存储过程.函数 ...
MySQL 系列（二）你不知道的数据库操作
第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决第二篇:MySQL 系列(二) 你不知道的数据库操作本章内容: 查看\创建\使用\删除数据库用户管理及授权实战局域网 ...
《你不知道的JavaScript》整理（二）——this
最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,这次研究了一下“this”. 当一个函数被调用时,会创建一个活动记录(执行上下文). 这个记录会包含函 ...
《你不知道的JavaScript》整理（一）——作用域、提升与闭包
最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 ...
position:sticky的兼容性尝试
开篇笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
APUE学习之三个特殊位设置用户ID（set-user-ID），设置组ID（set-group-ID），sticky
设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky set-user-ID: SUID 当文件的该位有设置时,表示当该文件被执行时,程序具有文件 ...
CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
基于sticky组件，实现带sticky效果的tab导航和滚动导航
上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...
你不知道的Javascript（上卷）读书笔记之一 ---- 作用域
你不知道的Javascript(上卷)这本书在我看来是一本还不错的书籍,这本书用比较简洁的语言来描述Js的那些"坑",在这里写一些博客记录一下笔记以便消化吸收. 1 编译原理在此 ...

随机推荐

吴超老师课程---ZooKeeper介绍和集群安装
1.ZooKeeper 1.1 zk可以用来保证数据在zk集群之间的数据的事务性一致.2.如何搭建ZooKeeper服务器集群 2.1 zk服务器集群规模不小于3个节点,要求各服务器之间系 ...
Rest_framework-1
目录一.认证二.权限三.限制访问频率四.总结一.认证(补充) 认证请求头 #!/usr/bin/env python # -*- coding:utf-8 -*- from rest_fra ...
12 Spring框架 SpringDAO的事务管理
上一节我们说过Spring对DAO的两个支持分为两个知识点,一个是jdbc模板,另一个是事务管理. 事务是数据库中的概念,但是在一般情况下我们需要将事务提到业务层次,这样能够使得业务具有事务的特性,来 ...
MySQL SQL Injection(注入)
如果通过网页接收用户输入,而后再把这些数据插入到数据库中,那么你可能就会碰到 SQL 注入式攻击.本节简要介绍如何防范这种攻击,确保脚本和 MySQL 语句的安全性. 注入式攻击往往发生在要求用户输入 ...
Kotlin学习记录2
参考我的博客:http://www.isedwardtang.com/2017/09/03/kotlin-primer-2/
MMU解读
转:https://blog.csdn.net/yueqian_scut/article/details/24816757 mmu页表也是放在内存中,mmu里有一个寄存器存放页表首地址,从而找到页表( ...
ssi include返回404页面
项目中index.html中包含 ...
MySQL 数据（数据库）迁移
查找MySQL真正的Data目录 show variables like 'datadir'; +---------------+-----------------+ | Variable_name ...
jsp select multiple
//File: index.html<HTML> <HEAD> <TITLE>Submitting Multiple Selection Sel ...
第三篇：Spark SQL Catalyst源码分析之Analyzer
/** Spark SQL源码分析系列文章*/ 前面几篇文章讲解了Spark SQL的核心执行流程和Spark SQL的Catalyst框架的Sql Parser是怎样接受用户输入sql,经过解析生成 ...

你不知道的sticky

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

随机推荐

热门专题