sticky属性解释一下？

最新推荐文章于 2024-02-19 14:10:48 发布
最新推荐文章于 2024-02-19 14:10:48 发布
阅读量584 收藏
点赞数
分类专栏： # CSS/CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43912756/article/details/108100859
版权
positin:sticky是一个新的CSS3属性，它的表现类似于position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像是position:relative一样。而当页面滚动超出区域时，它的行为就像是position:fixed一样，固定在目标位置。它可以设置top，left，right，bottom，默认设置只有没有任何变化。譬如当你设置top:0，当这个元素距离上为0时，就变成了固定定位。
这个东西不好和你解释，因为我是菜狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sticky:jquery.sticky.js 设置元素跟随页面滚动，效果可参见CSS中的sticky属性
05-01
jquery.sticky.js说明：设置元素跟随页面滚动，效果可参见CSS中的sticky属性依赖：jQuery使用示例（示例请参加demo里的代码）： //设置sticky，元素距离页面顶部100像素 $(".demo").sticky({ top: 100 });...
JS解决position:sticky的兼容性问题的方法
11-30
在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。...
块元素居中方式
gklcsdn的博客
12-10 735
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
position的属性(sticky属性)
ganlubaba666的博客
03-24 3057
position的属性对position所有的属性的介绍sticky属性定义demosticky生效以及失效fixed属性定义demoabsolute属性定义relative属性定义demo 对position所有的属性的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position sticky属性 定义 粘性定位元素（stickily ...
CSS position属性sticky
最新发布
weixin_44384273的博客
02-19 866
position:sticky
吸顶效果：1.css属性sticky优缺点 2.简单js实现吸顶效果
qq_43682422的博客
10-10 2171
document.documentElement.scrollTop 有些移动端不支持，导致无法获取正确的滚动高度，使用document.body.scrollTop移动端也能正常获取，兼容一下）（小细节：offsetTop计算的是当前元素距离父元素顶部的高度，多层嵌套则需要递归叠加offsetTop，所以建议是选取最外面的那层元素，则可以直接获取距离窗口的高度）当页面滚动高度超过元素距离窗口的高度，设置为fixed，且top为0（当然bottom也可以，数值随便设）1）计算元素距离窗口的高度。
position:sticky
热门推荐
JiangLittleBai的博客
10-12 2万+
一直以来都忽略了position:sticky这个属性 现在回过头一看，我都错过了些什么。。。。。。 position:sticky简介 设置了position:sticky的元素并不会脱离文档流。 当元素在区域内，元素不受定位的影响（top、left等设置无效） 当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果 tagg{ position:sticky; top:0; } 必须注意的点 设置了po
position:sticky粘性定位的几种巧妙应用与理解。
小祥编程擅长前端
09-14 2万+
position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。粘性定位可以被认为是相对定位和固定定位的混合元素在跨越特定位偏移之前为相对定位，之后为固定定位。top: 50px;}设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于50px之前，div为相对定位。之后元素将固定在与顶部距离50px的位置，直到viewport视口回滚到50px以内。
CSS中的 position属性sticky详解
11-21
在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会...我今天重点要说的就是sticky属性 position:sticky用法 position:sticky 被
详解CSS中position属性介绍(新增sticky)
09-22
的相关资料，position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性，感兴趣的小伙伴们可以参考一下
css属性sticky（粘性定位）固定导航
一只前端小白的博客
11-23 1万+
sticky（粘性定位）解释： 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 使用sticky实现固定导航头部 在以前，我们实现的主要思路就是使用js监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性，这样写起来相对麻烦，并且实现的效果也不...
CSS：深入理解粘性定位 position: sticky
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
position:sticky 粘性定位
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
position:sticky粘性/悬浮定位
Chuinj的博客
05-16 3986
position:sticky粘性/悬浮定位
前端css基础篇——position中能实现动态效果的sticky属性
weixin_44542562的博客
07-14 2620
position:sticky（粘性定位）简介 sticky是position属性中新添的一个属性，它可以说是fixed和relative的结合。它主要作用在scroll的监听上，在滚动过程中，当某元素的距离其父元素的距离达到设定的sticky值的时候，这时position：sticky的作用就相当于fixed固定定位，固定在适当的位置，不随滚动条的滚动而发生变化。 使用条件 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性； 必须制定 top、bottom
position: sticky 属性
文摘资讯
11-13 249
关于 position 属性主要有五个值：static relative fixed absolute sticky常见的就是 relative 和 absolute 这两个属性。relative 表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。比较复杂的是 sticky 属性。...
position:sticky；粘性布局
CodingNoob
12-06 2339
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
css粘性定位position：sticky
MichaelAn的博客
02-13 1173
css粘性定位position：sticky 前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；pos...
css中的sticky属性
xiangyizhixuexi的博客
07-14 5538
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position : sticky ; top : 100px ; } 设置position:sticky同时给一个(top,botto
linux 设置Sticky 属性
04-28
要在 Linux 中设置 Sticky 属性，可以使用 chmod 命令。Sticky 属性可以应用于目录或文件，它可以防止非所有者删除或移动该目录或文件。 例如，要将 Sticky 属性应用于目录 /home/shared，可以执行以下命令： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值