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. Spring @Value 用法小结，#与$的区别

    20161016更新:这货其实是SpEL的功能,来这里看看吧: Spring 4 官方文档学习(五)核心技术之SpEL 起因 一直的用法是 @Value("${jdbc.driverClas ...

  2. mt7620 wireless驱动特性意外发现

    前言 今天又客户反映无线參数SSID编程了HT_AP0, 同事通过后台给他改动后反映给我,我想不正确啊,难道是无线驱动crash了?那应该不能玩才对啊... 追查线索 我们的路由器会定期汇报数据SSI ...

  3. MVC路由之浅见

    1.定义路由.路由规则 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{re ...

  4. jsp中excel文件的创建与读取

    1.创建excel文件//这里的jxl不是java的标准jar包,需要在项目中另外加载 import jxl.Workbook; import jxl.write.Label; import jxl. ...

  5. 使用开源库 EasyTimeline 操作定时器 NSTimer

    EasyTimeline https://github.com/mmislam101/EasyTimeline Sometimes you need things to happen at speci ...

  6. Eclipse默认快捷键指南

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,包含一个框架和一组服务,用于通过插件组件构建开发环境,附带了一个标准的插件集(包括Java开发工具Java Development K ...

  7. Struts2 S标签 数目字格式化成金额输出（保留两位小数）

    JSP: <s:property value="%{formatDouble(price)}" /> Action:添加 //格式化数字显示 public String ...

  8. java类与继承的执行顺序

    1.子类 public class TestClassLife extends TestClassLifeSuper { public TestClassLife() { System.out.pri ...

  9. go语言之进阶篇同名字段

    1.同名字段 示例: package main import "fmt" type Person struct { name string //名字 sex byte //性别, ...

  10. leetcode414-第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示例 2 ...