css中position:sticky粘性定位介绍_F11 - 专业站长和开发者的学习网站

分享到

css中position:sticky粘性定位介绍

css 来源：互联网作者：佚名发布时间：2024-02-29 21:57:11 人浏览

摘要

1、什么是粘性定位？粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。它的行为就像position:relative;而当页面滚动超出

1、什么是粘性定位？

粘性定位它基于用户的滚动位置来定位。

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

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

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

例如：

div.sticky {

position: -webkit-sticky; /* Safari */

position: sticky;

top: 10px;

}

设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于10px之前，div为相对定位。之后元素将固定在与顶部距离10px的位置，直到viewport视口回滚到10px以内。

特点：

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。
sticky元素会固定在离它最近的一个拥有滚动机制的祖先上，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。

2、原理

视口元素：显示内容的区域。会设置宽高。一般会设置 overflow:hidden。

容器元素：离 sticky 元素最近的能滚动的祖先元素。

粘性约束元素：粘性定位的父元素。有时也会出现粘性约束元素就是容器元素的情况。

sticky 元素：设置了 position: sticky; 的元素。

滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时，sticky 元素也会滚出视口。

3、可能存在的不生效的情况

3.1 未指定 top, right, top 和 bottom 中的任何一个值

此时，设置 position: sticky 相当于设置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一个值。

3.2 垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度

当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。

水平滚动时，粘性约束元素宽度小于等于 sticky 元素宽度时，也不会生效。

3.3 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

示例如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.viewport {

width: 375px;

height: 300px;

background-color: pink;

padding: 20px;

overflow: auto;

}

.container {

height: 500px;

background-color: skyblue;

padding: 20px;

}

.box {

height: 300px;

background-color: lightgoldenrodyellow;

padding: 20px;

}

.stick-elem {

height: 50px;

background-color: seagreen;

padding: 20px;

position: -webkit-sticky;

position: sticky;

top: 50px;

}

</style>

</head>

<body>

<h3>粘性约束元素</h3>

<h3>sticky 元素</h3>

</div>

</body>

</html>

4、应用示例

4.1 头部固定

头部导航栏开始时相对定位顶部，当页面元素发生滚动时，变为和 fixed 类似的固定定位。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.main-container {

max-width: 375px;

height: 300px;

overflow: auto;

}

.main-header {

height: 50px;

background: pink;

position: -webkit-sticky;

position: sticky;

top: 0;

}

.main-content {

min-height: 500px;

background: skyblue;

}

.main-footer {

height: 50px;

background: seagreen;

}

</style>

</head>

<body>

<header class="main-header">HEADER</header>

<div class="main-content">MAIN CONTENT</div>

<footer class="main-footer">FOOTER</footer>

</main>

</body>

</html>

4.2 页脚固定

页脚固定效果，开始时页脚为固定定位效果，当页面滚动超过页脚时，页脚定位效果变为相对定位效果，可用于显示一些底部信息或广告。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.main-container {

max-width: 375px;

height: 300px;

overflow: auto;

}

.main-header {

height: 50px;

background: pink;

position: -webkit-sticky;

}

.main-content {

min-height: 500px;

background: skyblue;

}

.main-footer {

height: 50px;

background: seagreen;

position: sticky;

bottom: 0;

}

</style>

</head>

<body>

<header class="main-header">HEADER</header>

<div class="main-content">MAIN CONTENT</div>

<footer class="main-footer">FOOTER</footer>

</main>

</body>

</html>

4.3 侧边栏固定

当页面产生滚动，位置超过侧边栏的顶部阈值后，侧边栏变为固定定位，可用于实现侧边导航栏或侧边提示信息及广告展示。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.scroll {

width: 375px;

height: 300px;

overflow: scroll;

padding: 0 10px;

box-sizing: border-box;

background: pink;

}

.wrapper {

display: flex;

}

.content {

padding: 0 15px;

width: 200px;

}

.sidebar {

width: 175px;

height: 100%;

padding: 20px;

background: #2D2D2D;

color: #FFFFFF;

box-sizing: border-box;

position: -webkit-sticky;

position: sticky;

top: 15px;

}

</style>

</head>

<body>

<h1>Scroll Down!</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero

sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus suscipit blanditiis delectus

quos, soluta fuga voluptatem, facere inventore neque voluptate quaerat unde laboriosam molestiae

repellat, sapiente accusamus cumque! Ipsam, illo!</p>

</div>

</div>

</body>

</html>

4.4 列表描点

仅使用 css 就可实现页面滚动锚点固定效果，可用于实现通讯录滚动、日志记录滚动、其他分类列表滚动效果。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.container {

width: 375px;

height: 300px;

position: relative;

overflow: auto;

}

.list {

min-height: 500px;

background: pink;

}

.list-content,

.list-content>div {

padding: 10px 20px;

}

.list-header {

padding: 10px;

background: #2D2D2D;

color: #FFFFFF;

font-weight: bold;

position: sticky;

top: 0;

}

</style>

</head>

<body>

<div>Apple</div>

<div>Artichoke</div>

<div>Aardvark</div>

<div>Acorn</div>

</div>

</div>

</div>

<div>Danish</div>

<div>Dandelion</div>

</div>

</body>

</html>

4.5 表格表头固定

对 table 元素的 th 或 tr 设置 position: sticky; 可以实现表格头部或某行固定，也可将多个表格合并到一起，当滚动到当前表格是，固定头部自动变为当前表格的表头。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.container {

width: 375px;

height: 300px;

width: fit-content;

overflow: auto;

}

table {

text-align: left;

position: relative;

border-collapse: collapse;

}

th,

td {

padding: 30px 17px;

}

tr:nth-child(even) {

background: #EFEFEF;

}

tr.red th {

background: #dd4a63;

color: white;

}

tr.green th {

background: #03C03C;

color: white;

}

tr.blue th {

background: #1580d8;

color: white;

}

th {

background: white;

position: sticky;

top: 0;

}

</style>

</head>

<body>

<table>

<thead>

<th>Color</th>

</tr>

</thead>

<tbody>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<th>Color</th>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<th>Color</th>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

<tr>

<td>Lorem.</td>

<td>Ullam.</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

4.6 页面进度条（简易）

利用 position: sticky; 定位，可以实现页面浏览进度条效果，以下是简易进度条的演示，实际实现中可将未滚动到顶部的元素设置为透明色，滚动到顶部时变为蓝色。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

.container {

width: 400px;

height: 300px;

overflow: auto;

padding-bottom: 500px;

box-sizing: border-box;

background: pink;

}

.sticky {

width: 100px;

height: 10px;

background: rgba(36, 167, 254, 0.979);

position: -webkit-sticky;

position: sticky;

top: 0;

}

.sticky:nth-of-type(2) {

transform: translateX(100px);

}

.sticky:nth-of-type(3) {

transform: translateX(200px);

}

.sticky:nth-of-type(4) {

transform: translateX(300px);

}

</style>

</head>

<body>

<h1>Sticky Progress</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo

odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,

nostrum expedita.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo

odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,

nostrum expedita.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo

odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,

nostrum expedita.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo

odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,

nostrum expedita.</p>

</div>

</body>

</html>

您可能感兴趣的文章 :

原文链接 :

Tag : css(304)Sticky(4)

使用CSS实现有趣的汉堡菜单按钮的代码

使用transition过渡属性和transform变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。适用于h5页面或者app页面中，隐藏菜
CSS实现菜单箭头动画效果

其实是很简单的一个效果思路：箭头图标相对li标签绝对定位，定位到列表之外+列表元素overflow：hidden +悬停动画 html 1 2 3 li class=listyle1 im
CSS实现剪切蒙版视差滚动效果

大家应该都知道响应式吧，像什么响应式布局等等，这都是我们在开发中经常能遇到的。在年前结束的一个公司项目中，涉及到了相关响应
CSS实现好看的聚光灯效果介绍

使用-webkit-background-clip和clip-path，并配合animation属性，实现一个好看聚光灯效果。可适用于页面加载或展示页面大标题内容。核心代码部分
CSS合并单元格四种方式示例介绍(table/display/flex

效果图：方式一：table【最简单写法】 colspan：规定单元格可横跨的列数。 rowspan：规定单元格可横跨的行数。通过table的colspan和rowspan轻松
css中position:sticky粘性定位介绍

1、什么是粘性定位？粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间
使用CSS完成视差滚动效果介绍

在网页设计中，视差滚动效果可以为用户带来沉浸式的浏览体验。本文将详细介绍如何使用 CSS 来实现视差滚动效果。视差滚动效果的原理
使用CSS实现多行文本擦除效果的介绍

今天来实现一个多行文本擦除的效果，有种经典咏流传节目中表演开始前阅读诗句的一些既视感，在工作中其实也遇到过这样的需求当时是
CSS中Position:Sticky不起作用的问题解决

sticky属性不生效：检查浏览器兼容性；检查是否指定了阈值；检查 Safari 的供应商前缀；检查祖先元素是否具有overflow属性集；检查heig
css通过子元素选择父元素的实现介绍

伪类:has选择父元素 1 2 3 4 5 6 7 8 td:has( .unfoldTable){ //可选中所有td下包含unfoldTable的class标签的td属性 color: red; } td:has( div){ //可选中所有td下包