前言

　　我们大多都了解绝对定位、相对定位、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. Apache Doris ODBC外表数据库主流版本及其ODBC版本对应关系

    本文是在CentOS 7.9下测试通过 使用的Doris是:0.15.0 unixODBC版本是:2.3.1 1.PostgreSQL 以下是PostgreSQL数据库版本和PostgreSQL OD ...

  2. XCTF练习题---MISC---gif

    XCTF练习题---MISC---gif flag:flag{FuN_giF} 解题步骤: 1.观察题目,下载附件 2.观察下载的附件,发现是由黑白块组成的,试着拼接二维码,好像不太对,再仔细看看感觉 ...

  3. 【Electron】在 WSL2 中 打包 electron Linux 版本

    [Electron]在 WSL2 中 打包 electron Linux 版本. 安装 WSL 我使用的是 Ubuntu 20.04.4 LTS 的版本. 安装 WSL 文档地址:https://do ...

  4. 解决vue安装less报错Failed to compile with 1 errors的问题

    1.创建vue项目后安装less,执行 npm install less less-loader --save-dev 下载版本为:less-loader@6.1.0 , less@3.11.3,重启 ...

  5. Matlab学习笔记 绘图

    1.二维曲线(1)plot函数①plot函数的基本用法:plot(x,y),其中x和y分别用于存储x坐标和y坐标数据. >>x=[1,2,3]; >>y=[4,5,6]; &g ...

  6. 浅谈Nginx性能调优

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! Linux系统参数优化 下文中提到的一些配置,需要较新的 ...

  7. 专门为小白准备的入门级mybatis-plus-generator代码自动生成器，提高开发效率。值得收藏

    引入依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-g ...

  8. RabbitMQ从概念到使用、从Docker安装到RabbitMQ整合Springboot【1.5w字保姆级教学】

    @ 目录 一.前言 二.RabbitMQ作用 1. 异步处理 2. 应用解耦 3. 流量控制 三.RabbitMQ概念 1. RabbitMQ简介 2. 核心概念 四.JMS与AMQP比较 五.Rab ...

  9. ReentrantLock可重入、可打断、Condition原理剖析

    本文紧接上文的AQS源码,如果对于ReentrantLock没有基础可以先阅读我的上一篇文章学习ReentrantLock的源码 ReentrantLock锁重入原理 重入加锁其实就是将AQS的sta ...

  10. 斯坦福NLP课程 | 第11讲 - NLP中的卷积神经网络

    作者:韩信子@ShowMeAI,路遥@ShowMeAI,奇异果@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www. ...