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. Node.js是一个事件驱动I/O服务端JavaScript环境

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎.目的是为了提供撰写可扩充网络程序,如Web服务.第一个版本由Ryan Dahl于2009年发布,后来,Jo ...

  2. 7407 74LS07 74LV07 74LVC07

    SN7407 Convert TTL Voltage Levels to MOS LevelsHigh Sink-Current CapabilityInput Clamping Diodes Sim ...

  3. How to match between physical usb device and its drive letter?

    struct tagDrives { WCHAR letter; WCHAR volume[ BUFFER_SIZE ]; } g_drives[ ]; // WCHAR GetUSBDrive( ) ...

  4. 线程系列08,实现线程锁的各种方式,使用lock,Montor,Mutex,Semaphore以及线程死锁

    当涉及到多线程共享数据,需要数据同步的时候,就可以考虑使用线程锁了.本篇体验线程锁的各种用法以及线程死锁.主要包括: ※ 使用lock处理数据同步※ 使用Monitor.Enter和Monitor.E ...

  5. Java heap space 解决方法（转）

      因为程序要从数据读取近10W行记录处理,当读到9W的时候就出现 java.lang.OutOfMemoryError: Java heap space 这样的错误. 在网上一查可能是JAVA的堆栈 ...

  6. 算法：插入排序（Insertion Sort）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. android 内存溢出oom错误的一些小见解

    转:http://blog.csdn.net/xuhui_7810/article/details/9493681 我们在代码里调用setBackgroundResource(int resid)来设 ...

  8. Object类型转换为long或者Long

    1.转换为long Object o = new Object();long l = Long.valueOf(String.valueOf(o)).longValue(); 2.转换为Long Ob ...

  9. [Linux] Systemd 入门教程：命令篇

    reference : http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html Systemd 是 Linux 系统 ...

  10. [10] 圆管(Pipe)图形的生成算法

    顶点数据的生成 bool YfBuildPipeVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices, YeO ...