前言

　　我们大多都了解绝对定位、相对定位、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. linux 下通过fork实现后台运行进程

    1 # 通常建议使用双fork方法.在每个fork处,父级退出,子级继续 2 3 #!/usr/bin/env python 4 5 import time,platform 6 7 import o ...

  2. Windows10 office 点击链接提示您的组策略阻止我们为您完成此操作。设置ChromeHTML也无效.

    问题: win10环境点击office 中的网络链接时  出现了如下报错(一般在卸载了系统预装的其他浏览器后出现问题) 解决方案: 1.设置默认浏览器(已经设置可跳过) 控制面板->设置小图标 ...

  3. PTA刷题笔记

    PTA刷题记录 仓库地址: https://github.com/Haorical/Code/tree/master/PTA/GPLT 两周之内刷完GPLT L2和L3的题,持续更新,包括AK代码,坑 ...

  4. 【问题解决】'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

    问题复述 今天项目组有人找我说之前部署的程序在测试环境没问题,到生产环境出现了奇怪的问题,点按钮没反应. 我通过腾讯会议发现他们的浏览器控制台上打出了如下错误: Access to XMLHttpRe ...

  5. Azure Service Fabric 踩坑日志

    近期项目上面用到了Azure Service Fabric这个服务,它是用来做微服务架构的,由于这套代码和架构都是以前同学留下来的,缺少文档,项目组在折腾时也曾遇到几个问题,这里整理如下,以供参考. ...

  6. 图片查看器——viewer.js

    使用简介 https://github.com/FNNDSC/viewerjs(需要点击遮罩层关闭弹框的复制下面内容) https://www.jianshu.com/p/d98db3815823 v ...

  7. python操作MySQL、事务、SQL注入问题

    python操作MySQL python中支持操作MySQl的模块很多 其中最常见就是'pymysql' # 属于第三方模块 pip3 install pymysql # 基本使用 import py ...

  8. Centos7上安装python3.7

    Centos7安装python3.7 由于python2和python3在很大程度上有些不同,因为需要,就以决定安装python3.x的版本,但由于Centos上自安装的就是pyhton2.6.所以在 ...

  9. Nginx报错收集

    在安装完成ngixn之后,访问页面显示空白,报错信息里面有这一条报错信息: tailf /usr/local/nginx/logs/error.log 2018/10/26 10:58:00 [err ...

  10. async用法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...