position sticky

最新推荐文章于 2024-01-01 14:36:58 发布
最新推荐文章于 2024-01-01 14:36:58 发布
阅读量266 收藏
点赞数
分类专栏： 各种小知识点整理 文章标签： css position sticky
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35765126/article/details/91352755
版权

一直是模模糊糊知道个大概，今天有空试验梳理一下~
sticky定位就是在阙值前是相对定位，一旦到阙值就是绝对定位

  1. position:sticky
  2. 父元素不能是overflow:hidden/auto
  3. 必须指定top\left\right\bottom，如果不指定，则处于相对定位
  4. 如果父元素没有滚动框则相对的是viewport，如果有则相对于拥有滚动框的父元素
  5. 父元素高度不能小于sticky元素高度。
    父元素没有滚动框的情况，如图是相对于viewport定位的
    a. 阙值之前
    在这里插入图片描述b. 阙值之后
    在这里插入图片描述父元素有滚动框
    a.阙值之前
    在这里插入图片描述b.阙值之后
    在这里插入图片描述demo
    在这里插入图片描述
徐行莫停
关注
专栏目录
【Web前端】position: sticky滑动一定长度后失效
Get your hands dirty
02-06 2075
检查使用position: sticky属性的元素的父元素，是否设置了height属性。删除父元素的height属性即可。
CSS 粘性定位position sticky 用法实践
毛祥明-Zoe
08-25 1646
CSS 粘性定位position sticky 用法实践sticky实际效果展示应用场景Note案例代码jsxless sticky css属性position为sticky的元素，根据正常的文档流（flow of the document）进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, b
position:sticky
weixin_30349597的博客
05-10 404
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav {positio...
position:sticky用法
weixin_30846599的博客
02-18 772
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生。 position:sticky用法 position:sticky是一个新的css3属性，它的表现类似position:rel...
position:sticky；粘性布局
CodingNoob
12-06 2473
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
JS解决position:sticky的兼容性问题的方法
10-19
首先，我们来了解position:sticky属性。它是一个CSS定位方法，旨在解决相对定位（relative）和固定定位（fixed）在某些情况下使用上的不便。position:sticky结合了两者的特性：当元素在屏幕内滚动时，它表现为相对...
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
10-17
在传统的网页开发中，CSS3的position: sticky属性允许元素在页面滚动到特定位置时固定在页面顶部或底部，然而这一属性在微信小程序中并不直接支持。 为了解决这一问题，开发者可以通过编写JavaScript代码和使用微信...
position:sticky 粘性定位
热门推荐
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
粘性固定 position:sticky
webbingAndKami的博客
02-24 649
粘性定位position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。虽然其它浏览器尚不支持，但是实现起来其实不难，我们可以用js简单实现：HTML<div class="header"></div> CSS .sticky {...
position: sticky 详解
seimeii的博客
09-30 454
position: sticky 详解
css粘性定位position:sticky
小龚的博客
03-01 1890
介绍：position:sticky可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 设置position:sticky同时给一个(top,bottom,right,left)之一即可 使用条件： 1、父元素不能overflow:hidden或者overflow:auto属性。 2
position:sticky粘性/悬浮定位
Chuinj的博客
05-16 4772
position:sticky粘性/悬浮定位
position:sticky 粘性定位 (sticky) 与 固定定位
学习园地
01-21 5974
position:sticky是css定位新增属性；可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置 position 的其他定位 absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过"left",.
【前端基础系列】CSS篇-带你了解position:sticky
最新发布
Web面试那些事儿的博客
01-01 3261
如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是staticrelativeabsolutefixed，实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍：粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢？
彻底理解粘性定位 - position: sticky
最爱松露巧克力
11-21 927
粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。
CSS position: sticky; 粘性定位初识
MrLiber的博客
12-13 3922
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 #box { position: sticky; top: 10px; }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值