position: sticky

最新推荐文章于 2024-01-01 14:36:58 发布
最新推荐文章于 2024-01-01 14:36:58 发布
阅读量259 收藏
点赞数
文章标签： css
原文链接：https://codepen.io/flashback313/pen/GjBePd
版权

使用了这个属性后，可以设置top，这个top代表的意思是，如果设置了sticky的元素和包裹他的容器顶部的距离，如果小于top 设置的距离，便会和父元素一起滚动，如果大于的话，便会固定定位，具体可以看以下的例子
https://codepen.io/flashback313/pen/GjBePd

 

一只特立独行的猫猫
关注
CSS position:sticky
快乐de馒头
01-21 521
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 例如： 主要代码： position: sticky...
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
position:sticky
weixin_30349597的博客
05-10 406
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav {positio...
css3 position:sticky
weixin_30652271的博客
12-11 83
最近在写一个小程序，项目中遇到一个需求：页面滚动到tab切换菜单时，菜单fixed到页面顶部； 实现方法： 使用小程序的onPageScroll事件，滚动到指定位置添加fixed样式； bug1：获取指定位置错误，因为上面都是图片，在图片未加载出来时获取高度，高度值不对，解决办法就是在imgae上加bindload事件，在图片加载加载完成之后再获取高度； bug2：onPageScroll...
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
微信小程序----position:sticky
12-20
在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...
position:sticky；粘性布局
CodingNoob
12-06 2484
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
CSS：深入理解粘性定位 position: sticky
热门推荐
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
position:sticky 粘性定位
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
粘性固定 position:sticky
webbingAndKami的博客
02-24 651
粘性定位position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。虽然其它浏览器尚不支持，但是实现起来其实不难，我们可以用js简单实现：HTML<div class="header"></div> CSS .sticky {...
详解position:sticky
知无涯
02-14 5571
今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题 先说一下sticky这个属性的定义 sticky: 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和containing block(最近块级祖先nearest block-leve...
彻底理解粘性定位 - position: sticky
最爱松露巧克力
11-21 937
粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。
[CSS3] position: sticky 粘性定位
Libra_rookie的博客
05-15 381
position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 #one { position: sticky; top: 10px; } 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。 须指定top, right, botto
【前端基础系列】CSS篇-带你了解position:sticky
最新发布
Web面试那些事儿的博客
01-01 3378
如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是staticrelativeabsolutefixed，实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍：粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢？
position:sticky用法
weixin_30846599的博客
02-18 772
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生。 position:sticky用法 position:sticky是一个新的css3属性，它的表现类似position:rel...
由position: sticky; 想到的
cteng的专栏
11-28 820
近来发现亚马逊网站的书内容介绍使用了position:sticky; （或者用js自己控制scroll实现？），我注意到windows phone的音乐播放原来也是这么做的（按作者有个字母A-Z的一级导航） 这个UI的主要核心思想是：1级分类导航，当导航目录项scroll到屏幕最顶上时，就暂时固定住，这时scroll的内容就是这个目录下的内容，直到此目录内容全部显示完毕后，才会整体向下滚动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值