前言

　　我们大多都了解绝对定位、相对定位、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. 关于IDEA中添加静态资源（html，jpg等）后找不到资源（404 not found），以及WEB-INF目录介绍

    关于静态资源的加载 在IDEA中的java web application(或者maven项目)添加新的静态资源时(如html,jpg,gif等),常常会遇到静态资源无法加载的情况.这样的情况我们一般 ...

  2. Arraylist面试三连问

    点赞在看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 本文在公众号文章已同步,还有各种一线大厂面试原题.我的学习系列笔记. Arraylist为什么要加transient? ArrayList源 ...

  3. 【学习笔记】CDQ分治（等待填坑）

    因为我对CDQ分治理解不深,所以这篇博客只是我现在的浅显理解有任何不对的,希望大佬指出. 首先就是CDQ分治适用的题型: (1)带修改,但修改互相独立 (2)必须允许离线 (3)解决数据结构的题,能把 ...

  4. 【ACM程序设计】最小生成树 Prim算法

    最小生成树 ● 最小生成树的定义是给定一个无向图,如果它任意两个顶点都联通并且是一棵树,那么我们就称之为生成树(Spanning Tree).如果是带权值的无向图,那么权值之和最小的生成树,我们就称之 ...

  5. CSS预编译器

    零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...

  6. IDEA新建项目时的默认配置与模版配置

    今天一大早,群里(点击加群)有小伙伴问了这样的一个问题: 在我们使用IDEA开发项目的时候,通常都会有很多配置项需要去设置,比如对于Java项目来说,一般就包含:JDK配置.Maven配置等.那么如果 ...

  7. NLP教程(3) | 神经网络与反向传播

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www.showmeai.tech/article-det ...

  8. Spring配置及依赖注入

    入门 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-we ...

  9. centos7安装zabbix5.0

    一.安装zabbix-server 操作系统:CentOS 7.5 1.首先关闭防火墙与SElinux 关闭防火墙 systemctl stop firewalld&&systemct ...

  10. linux篇-linux面试题汇总

    Linux经典面试题,看看你会几题? 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统 ...