1、兼容性

https://caniuse.com/#search=sticky

chrome、ios和firefox兼容性良好。

2、使用场景

sticky：粘性。粘性布局。

在屏幕范围内时，元素不受定位影响（即top、left等设置无效）；

当元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

说明：元素并没有脱离文档流。

示例一：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>position:sticky示例</title>

        <style type="text/css">

            .container {

                background: #eee;

                width: 600px;

                height: 10000px;

                margin: 0 auto;

            }

            .sticky-box {

                position: -webkit-sticky;

                position: sticky;

                height: 60px;

                margin-bottom: 30px;

                background: #ff7300;

                top: 0px;

            }

            div {

                font-size: 30px;

                text-align: center;

                color: #fff;

                line-height: 60px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="sticky-box">内容1</div>

            <div class="sticky-box">内容2</div>

            <div class="sticky-box">内容3</div>

            <div class="sticky-box">内容4</div>

        </div>

    </body>

</html>

效果：

示例二：实现头部固定的导航栏

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>position:sticky示例</title>

        <style type="text/css">

            .container {

                background: #eee;

                width: 600px;

                height: 10000px;

                margin: 0 auto;

            }

            nav {

                position: -webkit-sticky;

                position: sticky;

                top: 0;

            }

            nav {

                height: 50px;

                background: #999;

                color: #fff;

                font-size: 30px;

                line-height: 50px;

            }

            .content {

                margin-top: 30px;

                background: #ddd;

            }

            p {

                line-height: 40px;

                font-size: 20px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <nav>我是导航栏</nav>

            <div class="content">

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

                <p>我是内容栏</p>

            </div>

        </div>

    </body>

</html>

效果：

position sticky 定位的更多相关文章

  1. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  2. position：sticky 定位 position:fixed

    它的表现类似position:relative和position:fixed的合体,当目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像 ...

  3. position:sticky的兼容性尝试

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

  4. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  5. position:sticky

    使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...

  6. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  7. position sticky的兼容

    position的sticky这个属性一般用于导航条,因为他在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top.left等属性无效),当该元素的位置将要移出偏移范围时,定位又会 ...

  8. CSS Position（定位）

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  9. 用position: sticky 实现粘性元素区域悬浮效果（转）

    用position: sticky 实现粘性元素区域悬浮效果 原创 2017年08月02日 20:04:13 161 在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头 ...

随机推荐

  1. BZOJ 1500: [NOI2005]维修数列 (splay tree)

    1500: [NOI2005]维修数列 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 4229  Solved: 1283[Submit][Status ...

  2. GoodSync 同步 对比 备份

    单向/双向皆可,针对任何一侧的文件进行处理,两侧文件都进行更新 文件同步 的操作过程是:确保两处或多处包含完全一致.及时更新 的各种文件.当对某一处进行文件添加.更改或删除,则同步操作将对对应的 另一 ...

  3. .Net高级技术——程序集

    程序集(Assembly),可以看做是一堆相关类打一个包,相当于java中的jar包(*).打包的目的:程序中只引用必须的程序集,减小程序的尺寸:一些程序集内部的类不想让其他程序集调用. 我们调用的类 ...

  4. 报错： LINQ to Entities 不识别方法“Int32 Parse(System.String)

    断点调试发现报错的语句为: public ActionResult SomeMethod(string someId) { var temp = SomeService.LoadEntities(a ...

  5. Spring Boot1.5X升级到2.0指南

    原文:https://www.jianshu.com/p/3494c84b4be3 前言 Spring Boot已经发布2.0有4个月多,多了很多新特性,一些坑也慢慢被填上,最近有空,就把本博客中Sp ...

  6. 【docker-compose】docker-compose.yml文本内容详解 + docker-compose命令详解 + docker-compose启动服务容器时区设置

    参考地址:https://blog.csdn.net/Kiloveyousmile/article/details/79830810 参考地址:https://docs.docker.com/comp ...

  7. 重载 UINavigationController 设置左侧返回按钮的文字为图片

    UINavigationController 导航栏控制器的左侧返回按钮如果需要设置成图片,仅使用系统的是无法实现的,需要重载系统的导航栏控制器,在控制器推出之前替换掉leftBarButtonIte ...

  8. AFNetworking 2.0使用(持续更新)

    本人视频教程系列 导入AFNetworking 2.0 文件夹,引入头文件AFNetworking.h --------------- *使用NSURLSessionDownloadTask来下载一张 ...

  9. Zabbix iostat 监控配置

    ## zabbix iostat 监控模板安装与配置 配置定时任务,用于生成iostat的统计数据 crontab -e * * * * * /usr/local/zabbix327/bin/iost ...

  10. request和request.form和request.querystring的区别

    asp中获取传递的参数,一般用request或者用request成员函数request.form,两种方式都可以获取页面表单传递过来的参数值,一直没留意两种方法有什么区别,我一般喜欢用request( ...