position:sticky粘性定位

最新推荐文章于 2025-04-10 16:50:48 发布
最新推荐文章于 2025-04-10 16:50:48 发布
阅读量626 收藏
点赞数
分类专栏： VUE 前端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<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>

【Web前端】position: sticky滑动一定长度后失效
Get your hands dirty
02-06 3312
检查使用position: sticky属性的元素的父元素，是否设置了height属性。删除父元素的height属性即可。
uniapp scroll-view顶部吸附之position: sticky;
m0_50080847的博客
08-05 4066
这里我用的是scroll-view 滚动。然后给 吸附的dom 设置了css: style="position: sticky;top: 0;z-index: 1;" bug： 当滑动距离超过scroll-view 高度时，吸附dom就失效了 解决方法： 在scroll-view 里加一个 view 标签。把所有东西抱起来 总结： sticky的特性： 1.sticky不会触发BFC，2....
粘性定位（position:sticky）——微信小程序学习笔记
最新发布
xiaopei_yan的博客
04-10 629
CSS 中的粘性定位（Sticky positioning）是一种特殊的定位方式，它可以使元素在滚动时保持在视窗的特定位置，类似于相对定位（relative），但当页面滚动到元素的位置时，它会表现得像固定定位（fixed）。这种定位方式特别适用于导航栏、侧边栏等需要在页面滚动时保持在特定位置的元素。fixed固定定位。
sticky定位
一只想躺平却不敢躺平的小菜鸟
03-07 139
css3 sticky定位
CSS——sticky定位
weixin_43599321的博客
12-08 2215
粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
css position: sticky粘性定位
352328759的博客
03-06 2029
最近认识到position: sticky;这个比较新的css属性.功能就如字面意思 定位: 粘性; 用这个新属性做 固定顶部 的功能,简直是湿湿碎 作为新属性,简单介绍下它的特性: 只对最近一个的滚动环境有效 没有滚动环境最后会冒泡到视图窗口,与其它position类似 与最近一个的滚动环境之间可以有其它中间节点 在中间节点里,定位也能有效,但受中间节点影响,影响规律不明 定位是相对于最近的滚...
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
css之sticky定位
Kratial的博客
10-08 8380
css之sticky定位
uniapp:粘性布局（吸顶：u-sticky）生效的注意事项
qq_45796592的博客
07-07 7970
子元素高度超过父元素高度，父元素使用overflow的auto、scroll等属性，此时有滚动，sticky依然是有效。元素都不能使用除了overflow的visiable以外的其他属性，比如auto、scroll、hidden。父元素高度没有设置，但是父元素的父元素设置了overflow:hidden。，一定要注意自己使用的原因是什么，要对什么内容进行吸顶的操作。除了父元素还要留意自己写的祖先元素的样式！
position:sticky 粘性定位
热门推荐
卿本无忧的博客
03-03 2万+
position:sticky 粘性定位
CSS position: sticky; 粘性定位初识
MrLiber的博客
12-13 4042
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 #box { position: sticky; top: 10px; }...
粘滞定位
weixin_43339334的博客
06-03 1148
粘滞定位 - 当元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定
(定位)粘滞定位
m0_67176957的博客
04-04 215
新推出的一种定位，一些版本较老的浏览器是不支持的。 可以在W3school查看用法。 粘滞定位 当前元素的position属性设置为sticky时则开启了元 素的粘滞定位。 当粘滞定位和相对定位的特点基本上是一样的。 不同： 不同的是粘滞定位可以在元素到达某个位置时将其 固定。 例： position:sticky top:0;(值可以更换)可以将其固定在网页中不在移动 【自行尝试】 真正要做网页时，一般是不会用的 如果编写ie的话会发生不兼容的情况，酌情处理。 ...
详解position: sticky粘性定位
橘猫吃不胖的博客
01-20 1353
深入了解sticky属性值与粘性定位 1 前言 1 可滚动元素对粘性定位的影响 2 理解粘性定位的计算规则 3 理解粘性定位的堆叠规则 4 其他
uni-app框架，uni-table组件表头固定 position: sticky
前端开发-前端技术分享
12-04 874
其实position: sticky 这个用户非常简单，就是使用一些开源组件的时间需要注意父元素的有没有设置overflow: auto|scroll|hidden，uni-table-scroll就设置，所以粘性/悬浮定位不能生效，也很容易被忽略掉。这个组件使用非常方便，使用的频率也非常的高，但是它淌有固定表单的功能，这个问题在一个项目困扰了我很久，找了官方issue，一直没有找到方案。框架中的一个组件，用于在应用中展示表格数据。在项目开发中，我们经常遇到需要固定某一部分重要数据，如表头、菜单等。
position: sticky;粘性
01-24
### CSS `position: sticky` 属性详解 #### 定义与特性 CSS 中的 `position: sticky` 是一种特殊的定位方式，它结合了相对定位和固定定位的特点。元素在页面滚动过程中会先按照正常的文档流移动，一旦达到设定的位置阈值（如 `top`, `bottom`, `left`, 或者 `right`），就会切换成相对于最近的滚动祖先固定的显示状态[^4]。 #### 关键属性配置 为了使 `position: sticky` 生效，除了要给目标元素设置此属性外，还需要为其指定至少一个非自动(`auto`)的偏移量参数，比如： ```css .sticky-element { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; /* 当前元素距离顶部的距离 */ } ``` 这段代码表示当页面向上滚动超过该元素原本所在位置时，这个元素将会被“黏住”，并始终保持在其父级容器内的最上方[^2]。 #### 浏览器兼容性处理 对于某些较老版本浏览器的支持问题，可以采用 `-webkit-` 前缀来确保更好的跨平台表现: ```css /* 针对 Webkit 内核浏览器如 Chrome 和 Safari 的特殊声明 */ position: -webkit-sticky; ``` #### 父级容器的要求 值得注意的是，如果希望子元素能够正确应用 `sticky` 效果的话，那么它的直接上级容器不应该有任何可能导致内部溢出隐藏的行为，具体来说就是不要让父级拥有 `overflow:hidden` 或者 `overflow:auto` 这样的样式定义，除非确实存在足够的可滚动内容[^3]。 #### 实际案例展示 下面是一个简单的例子展示了如何创建一个始终位于屏幕顶端的导航栏： ```html <header class="sticky-header"> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <style> .sticky-header { position: -webkit-sticky; /* For Safari */ position: sticky; top: 0; background-color: #f8f8f8; z-index: 100; } </style> ``` 在这个实例里，`.sticky-header` 类名下的 `<header>` 标签会在用户向下浏览网页的过程中一直停留在窗口顶部，提供便捷的操作入口[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值