- 综合排序
- 最热优先
- 最新优先
- 来自专栏TopFE
详解position:sticky
今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题 先说一下sticky这个属性的定义 sticky: 元素根据正常文档流进行定位 注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先 这个阻止了所有“sticky”行为（详情见Github issue on W3C CSSWG）。 简单说,就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在视口中时,显示的效果与relative 一致 当元素被滑动出视口外是,显示效果与fixed一致
1.5K10编辑于 2022-01-24 - 来自专栏Rattenking
神奇的position:sticky
sticky定义 position:sticky定义， eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响 sticky特点 sticky属性有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。 sticky的demo sticky展现效果 看了效果我就会很清楚的知道他的作用，在实际应用中，eg：导航栏随屏幕滚动定位顶部，侧边栏广告随滚动定位顶部等。 方案三：sticky实现原理 直接对导航使用position:sticky，就能实现上边看着复杂的效果。 优点： 代码量少； 不用JS监听滚动事件，减少了浏览器计算的消耗； 不会触发 BFC。 BFC详解 缺点： 兼容性不是很好； sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。
2.6K20发布于 2021-01-29 - 来自专栏java学习java
Nginx之sticky解读
如果浏览器不支持cookie，那么sticky不生效，整个模块是给予cookie实现的。 Sticky的安装 下载地址 nginx-goodies / nginx-sticky-module-ng / Downloads — Bitbucket 1）下载完成，放入服务器解压，记住解压的位置 /nginx-goodies-nginx-sticky-module-ng 红色部分修改为你解压后的路径 最后重新启动Nginx即可 make 编译的时候有可能会报错 修改：找到sticky 如果希望用sticky做负载均衡，请对Android开发说加上cookie。 cookie名称不要和业务使用的cookie重名。Sticky默认的cookie名称是route，可以改成任何值。 Nginx sticky模块不能与ip_hash同时使用 我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
2.1K311编辑于 2023-09-20 - 来自专栏杰的记事本
position:sticky的尝试
前言 sticky这种设计效果是经常出现的，比如陶宝右侧的工具栏，当我们向下滚动到它的位置时，它就会黏住顶部跟随滚动，类似position: fixed的效果，只不过它的触发条件是当我们滚动到所在位置时 我们经常的做法是用JavaScript去监听滚动事件然后进行处理，比如会用到类似stickyjs的一些插件 http://stickyjs.com/ ，从2017年左右开始css中的position:sticky 学习使用 我们来实现陶宝右侧的效果，就特别简单了，没什么好学的，直接设置就行了： .sidebar { position: -webkit-sticky; position: sticky html,css,output 还有一种设计效果，比如叠加效果也能实现，还有很多效果，具体大家可以根据sticky特性自由发挥： 叠加效果： https://jsbin.com/fegiqoquki html,css,output 特性 position:sticky有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们们们。
1.3K30发布于 2019-12-10 - 来自专栏404
IE兼容position: sticky
IE兼容position: sticky 库：https://github.com/wilddeer/stickyfill // install npm install stickyfilljs -- save or yarn add stickyfilljs or <script src="path/to/stickyfill.min.js"></script> // html <div class="<em>sticky</em> </div> // css .<em>sticky</em> { position: -webkit-<em>sticky</em>; position: <em>sticky</em>; top: 0; } // clearfix .<em>sticky</em>:before, .<em>sticky</em>:after { content: ''; display: table; } import Stickyfill from "yarn ); // jq usage var elements = $('.sticky'); Stickyfill.add(elements);
2.8K10编辑于 2022-04-25 - 来自专栏IT杂症
css中sticky属性
sticky粘性定位 是css新增属性 其实就是以往我们做的fixed;当滚动条下拉到一定程度设置容器为fixed； 用图来演示： 常见场景：通讯录及头部工具条 <! *{margin:0;padding:0;} .nav{color: #fff;font-size: 24pt;padding:0 10px; position: sticky
1.1K20发布于 2021-11-08 - 来自专栏田小檬博客
css粘性定位sticky
前言 发现很多博客的侧边栏可以跟随滚动条移动到底部又可以继续翻看侧边栏，F12看了下代码，仅仅是用了一个sticky定位，下边我简单说一下sticky定位 内容简介： 讲 sticky 定位之前，我先说一下 sticky的使用 粘性定位可以被认为是相对定位和固定定位的混合。 #sticky-nav { position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 粘性定位为什么不起作用 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 父元素的高度不能低于sticky元素的高度 sticky元素仅在其父元素内生效
1.6K10编辑于 2022-08-30 - 来自专栏向全栈出发
Typecho 文章置顶插件：Sticky
Typecho插件系列之：Sticky 这是一个轻巧好用的文章置顶插件。 使用步骤： 1. 下载地址：typech-sticky.zip 下载之后建议先解压，将文件夹名字改成Sticky ，然后打包上传到主题目录的/usr/plugins/目录下。 2. 安装插件 在网站后台安装插件。 php $this->sticky(); ?><?php $this->title(); ?>
3.1K10发布于 2020-09-10 - </template> <script> import Sticky from "@/components/Sticky"; export default { components:{ Sticky:Sticky } }; </script>来自专栏大前端（横向跨端 & 纵向全栈）
Vue组件设计-Sticky布局
Sticky布局即为粘性定位，常见于一些重要的页面区域在向上滚动时不会被卷起来，在CSS中可以通过设置position:sticky来实现这一功能，但是如果出于兼容性考虑或是一些复杂的场景，就需要我们用传统的方法来实现 ); window.removeEventListener("resize", this.handleResize); }, methods: { sticky div style="height:2000px;">
<Sticky >1.2K20编辑于 2023-05-03
【说站】css中sticky属性是什么
css中sticky属性是什么 说明 1、position的新属性sticky，在屏幕范围内(viewport)设置sticky元素时，该元素的位置不会受到定位的影响。 2、sticky属性解决了对象脱离常规流时下部对象瞬间偏移的问题。 就像relative和fixed的组合。 实例 .sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky ; position: sticky; top: 1px; } 以上就是css中sticky属性的介绍，希望对大家有所帮助。
kafka中的Sticky分区方法
Sticky partitioning strategy 粘性分区器通过选择单个分区来发送所有非键记录，解决了将没有键的记录分散成较小批次的问题。 原文链接：https://www.confluent.io/blog/apache-kafka-producer-improvements-sticky-partitioner/ 本文为从大数据到人工智能博主
使用 position:sticky 实现粘性布局
偶然发现其实还有一个处于实验性的取值，position:sticky（戳我查看MDN解释）： { position: sticky; } 卧槽，什么来的？ ? 初窥 position:sticky sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。 : -webkit-sticky; position: sticky; top: 0; } 就可以轻松实现了。 运用 position:sticky 实现头部导航栏固定 运用 position:sticky 实现导航栏固定，也是最常见的用法： ? 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。
Sticky Broadcast被禁用的原因
所有进程在注册的时候，都会收到该广播（不仅仅只是发送者进程能收到，其他进程也可以收到） 所有进程都可以更新StickyBroadcast 发送者需要声明android.permission.BROADCAST_STICKY 权限 只有当调用removeStickyBroadcast时，才会被清除 Sticky的广播会被所有进程接收。
探究 position-sticky 失效问题
如果你对 sticky 还不太熟悉，可以先看看我的这篇文章：使用 position:sticky 实现粘性布局，当然，这篇文章里面有稍微探讨 position: sticky 生效或者说失效的规则，但是不太充分 CodePen Demo -- Normal Sticky Demo 失效的 position: sticky 1、包裹的父容器高度与 sticky 元素一致 有趣的是，如果在 .sticky 元素和你希望 .sticky 生效吸附的滚动元素中间，添加上一层 .parent 的 div 元素，不给 div 添加任何样式，sticky 则失效了。 CodePen Demo -- invalid Sticky Demo 1 失效原因：此时 .sticky 元素的最近的 scrollport 变成了它的父容器 div，而父容器 div 的高度和 .sticky 其实，这里不算失效，我们只需要将包裹 .sticky 元素的父容器的高度设置的大于 .sticky 元素本身，也能看到效果。
解决 Error: parent directory is world writable but not sticky
使用 Homebrew 安装 yarn 时遇到了 Error: parent directory is world writable but not sticky brew install yarn 报错内容如下 901b03db630ae5b508ecc153c742682c1257573cd9b12507393eac1d9bcec561--yarn-v1.17.0.tar.gz Error: parent directory is world writable but not sticky brew.rb:102:in `<main>' 在 Homebrew GitHub上查到的解决方案： Error: parent directory is world writable but not sticky
CSS3之position:sticky使用
一、简介css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。 父元素使用auto、scroll等属性，此时且出现了滚动，sticky依然是有效设置父元素高度，子元素高度没有超过父元素高度，此时没有出现滚动，sticky仅在父元素高度内有效sticky元素需要设置top 、bottom、left、right的值四、案列<style>.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px
position:sticky的兼容性尝试
在这里主要介绍下关于css3草案的position：sticky属性的兼容。 ，可以不用js来完成粘性布局 深入 针对sticky布局的兼容性，我们很容易兼容大多数移动端浏览器。 ，则相对于适口定位 + 元素最近的祖先元素overflow设置为非默认值visible时，则元素相对于该祖先元素进行sticky定位。 若最近的祖先元素设置为overflow:hidden，则元素不会sticky定位 因此解决ios的代码可以这样： // sticky类为粘性布局的样式设置 if (gtIOS6) { // 大于等于 iOS6版本使用sticky $tab.addClass('sticky'); } .sticky { position: -webkit-sticky; position: sticky
如何运用position:sticky实现粘性布局？
而使用 position:sticky ，则可以非常方便的实现
负载均衡调度算法（random，roundrobin，hash，sticky）
在负载均衡领域，random、roundrobin、hash和sticky是几种核心的调度算法，它们分别适用于不同的场景，并具有各自的优缺点。以下是对这四种算法的详细分析。 4.Sticky（粘性会话）Sticky并非一种独立的调度算法，而是一种策略或特性，通常与其他调度算法（如roundrobin、random）结合使用。 工作原理：以Dubbo框架为例，当配置sticky=”true”后，负载均衡器会记录上次成功调用的服务器信息。在后续请求时，首先尝试调用该“粘滞”的服务器。 与Hash算法的区别：Sticky策略更偏向于客户端会话的亲和性，它基于调用历史记录，而不一定需要像Hash算法那样基于某个固定字段（如IP、Cookie）进行精确计算。 Hash算法是确定性的（相同Key必然去往同一服务器），而Sticky在首选服务器失效后，会遵循新的调度规则，具有一定灵活性。
Linux文件和目录的粘滞位(sticky bit)
做开发这么多年了，还没见过所谓"t"的权限，于是找了一位公司的linux大师帮忙，大师噼里啪啦的做了一堆试验后，然后在google上搜索"rwt linux",终于发现了问题，发现这种用法的名字是“文件的粘滞位(sticky 它的作用是：普通文件的sticky位会被linux内核忽略，但 目录的sticky位表示这个目录里的文件只能被owner和root删除，没错这就是问题本质，也和我的现象相吻合。 所以将这个知识点整理如下： 文件的粘滞位(sticky)位是作什么用的？ 普通文件的sticky位会被linux内核忽略， 目录的sticky位表示这个目录里的文件只能被owner和root删除 粘着位（Sticky bit） 如果用户对目录有写权限，则可以删除其中的文件和子目录 系统是这样规定的, 假如本来在该位上有x, 则这些特别标志 (suid, sgid, sticky) 显示为小写字母 (s, s, t). 否则, 显示为大写字母 (S, S, T) 。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号