开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有没有jQuery替代position: sticky？

有，CSS的position: sticky属性可以替代jQuery中的position()方法来实现粘性定位效果。position: sticky可以使元素在滚动到特定位置时固定在屏幕上方或下方，类似于position: fixed，但是在滚动到一定位置时会变为相对定位，不会一直固定在屏幕上。

优势：

简单易用：使用CSS的position: sticky属性可以直接在样式表中设置，不需要引入额外的库或插件。
性能优化：使用原生CSS属性可以减少页面加载时间和资源消耗，提高网页性能。
兼容性好：position: sticky在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari等主流浏览器。

应用场景：

导航栏：可以使用position: sticky使导航栏在滚动时固定在页面顶部，方便用户导航。
广告栏：可以使用position: sticky将广告栏固定在页面某个位置，提高广告的曝光率。
表格标题：可以使用position: sticky将表格的标题行固定在页面顶部，方便用户查看表格内容。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos

请注意，以上推荐的腾讯云产品仅供参考，具体选择还需根据实际需求进行评估和决策。

相关搜索:"position: sticky;“元素排列不整齐 .parseHTML()替代jQuery1.7？JQuery position()和offset()方法不起作用 Jquery替代甜蜜警报 JQuery箭头函数替代 overflow:使用position:sticky时，自动无法正常工作 position: sticky;为什么position:sticky不能与flexbox一起工作？使用position: sticky在一个元素上显示元素使用position:sticky时图像不会留在原地

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

详解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.2K1 0

神奇的position:sticky

sticky定义 position:sticky定义， eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响...方案二：单导航通过对导航的position的值在fixed和relative切换，来实现优点：比第一种方案少了一个导航，直接在一个导航操作缺点：依然需要JS来监听，进行position...$('.module-nav').css('position','fixed') : $('.module-nav').css('position',''); }); 注意：在fixed定位的时候需要进行...方案三：sticky实现原理直接对导航使用position:sticky，就能实现上边看着复杂的效果。优点：代码量少；不用JS监听滚动事件，减少了浏览器计算的消耗；不会触发 BFC。...看看这个demo你就明白了 CSS代码 .module-nav{ position: sticky; top: 0; left: 0; z-index: 10000;

1.9K2 0

position:sticky的尝试

前言 sticky这种设计效果是经常出现的，比如陶宝右侧的工具栏，当我们向下滚动到它的位置时，它就会黏住顶部跟随滚动，类似position: fixed的效果，只不过它的触发条件是当我们滚动到所在位置时...学习使用我们来实现陶宝右侧的效果，就特别简单了，没什么好学的，直接设置就行了： .sidebar { position: -webkit-sticky; position: sticky...html,css,output 特性 position:sticky有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们们们。...一直在变化，可是哪知道这些变化反而解决了我们的痛点，也许你习惯了，觉得不是痛点不去学，但是不能否认你学会之后，你会说以前太痛了，再也不想回去了，就像学会vue，react, angular 等，再回去jquery...真的觉得有点痛苦了，但你不想学之前，总觉得jQuery不怎么痛，你习惯了。

9403 0

IE兼容position: sticky

IE兼容position: sticky 库：https://github.com/wilddeer/stickyfill // install npm install stickyfilljs --...save or yarn add stickyfilljs or // html // css .sticky { position: -webkit-sticky; position: sticky; top: 0; } // clearfix....sticky:before, .sticky:after { content: ''; display: table; } import Stickyfill from "yarn...); // jq usage var elements = $('.sticky'); Stickyfill.add(elements);

2.3K1 0

使用 position:sticky 实现粘性布局

偶然发现其实还有一个处于实验性的取值，position:sticky（戳我查看MDN解释）： { position: sticky; } 卧槽，什么来的？ ?...: -webkit-sticky; position: sticky; top: 0; } 就可以轻松实现了。...运用 position:sticky 实现头部导航栏固定运用 position:sticky 实现导航栏固定，也是最常见的用法： ?...设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。...这里需要解释一下：如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况

1.7K4 0

探究 position-sticky 失效问题

CSS 的 position 值中，有一个非常有用的值 -- position: sticky，通常会被用于各种吸顶，吸底，吸边的效果中。...如果你对 sticky 还不太熟悉，可以先看看我的这篇文章：使用 position:sticky 实现粘性布局，当然，这篇文章里面有稍微探讨 position: sticky 生效或者说失效的规则，但是不太充分...最近遇到一些 position-sticky 失效的场景，所以总结了一下。...其实，不止是 overflow: hidden ，设定为 position: sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效...（当然，此时，sticky 吸附的基准元素就会变成父元素）如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position

4.7K2 0

CSS3之position:sticky使用

一、简介css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。...父元素使用auto、scroll等属性，此时且出现了滚动，sticky依然是有效设置父元素高度，子元素高度没有超过父元素高度，此时没有出现滚动，sticky仅在父元素高度内有效sticky元素需要设置top...、bottom、left、right的值四、案列.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px...粘性定位!...满足的条件，以上案例是可以正常进行sticky的，over我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

4180 0

position:sticky的兼容性尝试

在这里主要介绍下关于css3草案的position：sticky属性的兼容。...throttle节流，避免每次滑动都执行，可以设置时间间隔，如50ms + 在侦听函数中计算元素的layout属性，可用setTimeout在定时器队列尾插入任务，异步渲染 + ios设备实现了一个属性－position...：sticky，可以不用js来完成粘性布局深入针对sticky布局的兼容性，我们很容易兼容大多数移动端浏览器。...若最近的祖先元素设置为overflow:hidden，则元素不会sticky定位因此解决ios的代码可以这样： // sticky类为粘性布局的样式设置 if (gtIOS6) { // 大于等于...iOS6版本使用sticky $tab.addClass('sticky'); } .sticky { position: -webkit-sticky; position: sticky

3.7K10 0

如何运用position:sticky实现粘性布局？

{ position: static; position: relative; position: absolute; position: fixed; } sticky 英文字面意思是粘...{ position: -webkit-sticky; position: sticky; height: 60px; margin-bottom: 50px; background...: -webkit-sticky;position: sticky;就可以轻松实现了。...设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。...这里需要解释一下：如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况

1.9K2 0

jQuery offset和position

在jQuery中，offset和position是用于获取元素在文档中位置信息的方法。这两个方法可以帮助我们定位和操作元素。offset方法offset方法用于获取元素相对于文档的偏移位置。...position方法position方法用于获取元素相对于其父元素的偏移位置。它返回一个包含top和left属性的对象，表示元素的垂直和水平偏移值。...下面是position方法的使用示例：var position = $("#myElement").position();console.log("Top: " + position.top + ",...Left: " + position.left);在上述示例中，我们使用position方法获取了id为"myElement"的元素相对于其父元素的偏移位置，并打印了它的垂直和水平偏移值。...= $("#myElement").position();console.log("Position - Top: " + position.top + ", Left: " + position.left

6521 0

Tips-移动端滑动固顶效果(position: sticky)

position: sticky 就是用来实现这个效果的，元素不脱离文档流，仍然保留高度，所以这个属性真是人畜无害啊，而且效果如丝般润滑，堪比原生。...{ top: 0; width: 100%; z-index: 999; } .sticky-wrap { position: relative; position: -webkit-sticky...; } .page-wrapper.sticky .sticky-wrap { position: fixed; } .content-a { height: 200px; background-color...} 这里通过计算 $('.sticky-wrap').css("position").indexOf("-webkit-sticky") 是否有效来判断浏览器是否支持 sticky 属性，然后通过监听...touchmove 和 touchend 事件，在合适的时候添加一个叫 sticky 的类，这个类设置带了些样式： .page-wrapper.sticky .sticky-wrap { position

2K6 0

position设置sticky布局不生效的可能情况

sticky布局的设置很简单，原理也很好理解，因为在这之前我们也曾经用其他定位方式来模拟过这种布局效果，例如，顶部菜单的固定，侧边客服控件的固定等。...但是，在使用sticky布局时也有一些需要注意的情况，这些情况都可能导致你设置的sticky布局不生效，截止目前，我遇到的几种可能情况如下1、sticky元素相对定位的父辈元素被设置了overflow相关的属性...hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto; 这种情况最常发生了，错误代码如下 2、忘了给sticky的元素设置定位位置属性，left,top,right.bottom 中的一个或多个3、设置sticky的子元素，高度超过其设置了定位的父元素

2.2K5 0

jQuery源码解析之position()

position() 作用：返回被选元素相对于父元素（parent）的偏移坐标使用：直接调用$().position()即可，该方法没有 arguments（参数对象）这是divTwo $("#pTwo").position() //{top: 0, left..., "position" ) === "fixed" ) { // Assume position:fixed implies availability of getBoundingClientRect...", true ) }; }, 解析：整体上看，是一个 if(...fixed) { } esle { } 语句（1）if ( jQuery.css( elem, "position..." ) === "fixed" ) if ( jQuery.css( elem, "position" ) === "fixed" ) { // Assume position:fixed

6041 0

jQuery方法position()与offset()区别

参考别人写得比较明白的，红色部分为重点吧：使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同...position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。...offset()始终返回相对于浏览器文档的距离，它会忽略外层元素下边看个简单的例子，这里外层的div元素(position:relative)仅一个： //获取相对于最近的父级(position:relative)的位置var vposition = $("#inner").position(); alert(vposition.left

7026 0

微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果）

实现的原理通过对scroll的监听获取滚动条的scrollTop值; 在导航的class判断scrollTop; 切换position:fixed与position:relative。...WXML <scroll-view scroll-y="false" bindscroll...: relative; top: 0; left: 0; } .page-group-position{ position: fixed; } .page-nav-list{ padding...'page-group-position' : '' 实质： scrollTop > 360 ?...'fixed' : 'relative' 缺点：由于有获取scrollTop的过程，所以会出现定位不及时，也就是导航闪动的效果；没有原生CSS3的position:sticky流畅，体验比较差；由于我目前还未找到直接获取

1.8K2 0

css3新属性position: sticky 一分钟实现导航栏悬停功能

css3新属性position: sticky 一分钟实现导航栏悬停功能前言正文前言公众号：前端印象不定时有送书活动，记得关注~ 关注后回复对应文字领取：【面试题】、【前端必看电子书】、...今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧，坚持看下去，就只需一分钟就能搞定。...: sticky; //设置position: sticky样式 top: 0; //top: 0 表示当该标签顶部离浏览器只有...其实原理就是，当标签离浏览器顶部的距离没有达到我们设置的top值时，该标签都处于position: relative 的状态，占据文本流存在于内容中；当标签离浏览器顶部的距离达到我们设置的top值时，...该标签处于position: fixed，一种固定状态，所以能达到悬停的效果。

1.7K1 0

一些原生写法可以替代Jquery方法

// jQuery写法　　$(child).remove() 　　// DOM写法　　child.parentNode.removeChild(child) 三、事件的监听 jQuery的on方法，...六、attr方法 jQuery使用attr方法，读写网页元素的属性。　　...webkitTransitionEnd”, transitionEnded); 　　el.addEventListener(“transitionend”, transitionEnded); 十二、替代方案...由于jQuery体积过大，替代方案层出不穷。...如果不求最大兼容，只希望模拟jQuery的基本功能，那么，min.js优化后只有200字节，而dolla优化后是1.7KB。此外，jQuery本身采用模块设计，可以只选择使用自己需要的模块。

2.1K2 0

【前端词典】4 种滚动吸顶实现方式的比较

目录使用 position:sticky 实现使用 JQuery 的 offset().top 实现使用原生的 offsetTop 实现使用 obj.getBoundingClientRect(...四种实现方式一、使用 position:sticky 实现 1、粘性定位是什么？...元素的高度 sticky 元素仅在其父元素内生效在需要滚动吸顶的元素加上以下样式便可以实现这个效果： .sticky { position: -webkit-sticky; position...解决方案：还记得第一种方案中的 position:sticky 吗？这个属性在 IOS6 以上的系统中有良好的兼容性，所以我们可以区分 IOS 和 Android 设备做两种处理。...IOS 使用 position:sticky，Android 使用滚动监听 getBoundingClientRect().top 的值。如果 IOS 版本过低呢？

2.5K6 0

waypoint_使用jQuery Waypoint创建粘性导航标题

但是，正如古老的谚语所说，给猫皮剥皮应该不止一种方式-因此，在本教程中，我将为此类元素提出一种替代的视觉风格，我发现它看起来更自然，更美观。令人愉悦。希望您喜欢并充分利用它！...（在此位置，请将nav可能需要的所有垂直边距移动到nav-container ） .sticky { position: fixed; top: 0; } 我们已经准备好了！...通过在nav内添加另一个div并编写一些CSS可以轻松实现此目的： .sticky .nav-above { position: absolute; top:-15px; left:1em...所有这些都是标准的jQuery票价：在nav添加或删除sticky类后，我们便会使用.css()覆盖元素的垂直位置，然后使用.animate()其设置为应有的水平。...翻译自: https://webdesign.tutsplus.com/articles/create-a-sticky-navigation-header-using-jquery-waypoints–webdesign

3.3K3 0

jQuery 中三目运算替代 if 判断的简洁性

由于我对逻辑的不清晰，以及从来没有系统学过javascript ，所以在写jQuery的时候常常写得比较长。

3782 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭