前言

　　我们大多都了解绝对定位、相对定位、static 和 fixed 定位，而 sticky 定位常常会被忽略，本文来总结一下其相关使用方法。

正文

　　1、常见使用效果

　　我们滚动滚动条时，当 “ 我是粘性定位！” 的元素在触顶之后，他却没有继续向上滑动，而停留在可视区域内，这种实现效果就需要通过 sticky 定位来实现。

　　2、sticky 定位详解

　　sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

　　position: sticky; 基于用户的滚动位置来定位。

　　粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

　　它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

　　元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

　　这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

　　注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

　　基于上面的概念，我们先来认识四个元素：

　　使用注意：

　　（1）必须指定 top, right, bottom 或 left 中的任何一个值，否则不会生效，相当于设置 相对定位

　　（2）垂直滚动时，粘性约束元素的高度要大于 sticky 元素的高度

　　（3）粘性约束元素和容器元素之间不能存在overflow:hidden 的元素，如下：

<div class="viewport">

  <div class="container"> <!-- 容器元素 -->

    <div style="overflow: hidden">

      <div> <!-- 粘性约束元素 -->

        <div class="stick-elem">...</div>  <!-- sticky 元素 -->

        ...

      </div>

    </div>

  </div>

</div>

　　3、常见使用方法

　　粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。

　　下面代码实现文章开头的定位效果：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

div.sticky {

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  padding: 5px;

  background-color: #cae8ca;

  border: 2px solid #4CAF50;

}

</style>

</head>

<body>

<p>滚动页面。</p>

<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">

  <p>滚动我</p>

  <p>来回滚动我</p>

  <p>滚动我</p>

  <p>来回滚动我</p>

  <p>滚动我</p>

  <p>来回滚动我</p>

</div>

</body>

</html>

总结

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

css-sticky 定位的更多相关文章

  1. CSS布局：sticky定位

    stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里:或者,当它发现自己可以跟随“正常”文档流而脱离sticky位置时,就果断离开从而加入文档流. 代码与效果如下: < ...

  2. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  3. CSS Sticky 其实很简单

    为什么要写这篇文章 Sticky 也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对 Sticky 的理解有偏差,代码执行结果不如预期.决定写篇文章重新学习一次. 什么是 Sti ...

  4. CSS position定位属性

    css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...

  5. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  6. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  7. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  8. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  9. 转：Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  10. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

随机推荐

  1. Java语言学习day33--8月8日

    今日内容介绍1.基本类型包装类2.System类3.Math类4.Arrays类5.大数据运算 ###01基本数据类型对象包装类概述 *A:基本数据类型对象包装类概述 *a.基本类型包装类的产生 在实 ...

  2. 今天学弟问我pip如何永久换源？

    pip如何永久换源 临时使用 我们在使用Python开发的时候,经常要下载第三方模块,最常用的方式就是直接pip install 模块名,但是默认是使用国外的源,从pypi仓库中查找目标模块,不管是网 ...

  3. 小米路由器3G R3G 刷入Breed和OpenWrt 20.02.2 的记录

    小米 R3G 参数 Architecture: MIPS Vendor: Mediatek Bootloader: U-Boot System-On-Chip: MT7621 family CPU/S ...

  4. marginStart marginEnd就关于上述两个用法展开讨论

    在我还在手动调整两个控件距离时,第一次见识到了marginStart marginEnd两个用法, 但是,只知道它俩能够调整控件距离,但是不知道具体用法,老师也没细说,就这样开启了我对于这两个用法&q ...

  5. 论文解读（CGC）《CGC: Contrastive Graph Clustering for Community Detection and Tracking》

    论文信息 论文标题:CGC: Contrastive Graph Clustering for Community Detection and Tracking论文作者:Namyong Park, R ...

  6. nacos 详细介绍(一)

    一.Nacos介绍 Nacos是SpringCloudAlibaba架构中最重要的组件. Nacos 是一个更易于帮助构建云原生应用的动态服务发现.配置和服务管理平台,提供注册中心.配置中心和动态 D ...

  7. VDO虚拟数据优化

    VDOVirtual Data Optimize 虚拟数据优化 是一种通过压缩或删除存储设备上的数据来优化存储空间的技术. VDO 是红帽公司收购了 Permabit 公司后获取的新技术,并与2019 ...

  8. kafka基础原理

    1.什么是kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列 消息队列的两种模式: 点对点模式(一对一,消费者主动拉取数据,消息收到后消息清除).特点,一个消息只能被一个消费者消费 发 ...

  9. opencv学习之边缘检测

    边缘检测 是图像处理 过程中经常会涉及到的一个环节.而在计算机视觉 和 机器学习领域,边缘检测 用于 特征提取 和 特征检测 效果也是特别明显.而 openCV 中进行边缘检测的 算法 真是五花八门, ...

  10. 降维、特征提取与流形学习--非负矩阵分解（NMF）

    非负矩阵分解(NMF)是一种无监督学习算法,目的在于提取有用的特征(可以识别出组合成数据的原始分量),也可以用于降维,通常不用于对数据进行重建或者编码. NMF将每个数据点写成一些分量的加权求和(与P ...