文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

纯CSS实现吸附效果

它们都有着共通的实现原理：监听scroll事件，判断scrollTop和目标元素的位置范围，符合条件则将目标元素的position声明为fixed，令目标元素相对于浏览器窗口进行定位，让用户看上去就像钉在浏览器指定位置上...第1个：top为0px，滚动到容器顶部就固定 第2个：top为40px，滚动到距离容器顶部40px就固定 第3个：没有声明top/bottom，就一直保持相对定位 第4个...：bottom为40px，滚动到距离容器底部40px就固定 第5个：bottom为0px，滚动到容器底部就固定 当然，换成left和right也一样能实现横向的吸附效果。...可点击「阅读原文」查看本文的源码与效果。 注意 粘性定位的参照物并不一定是position:fixed。...当离目标元素最近的祖先元素声明了position:relative|absolute|fixed|sticky，目标元素就相对该祖先元素进行粘性定位。

3.9K20

Vue2.脚手架

$mount('#app')同el:'#app'，用于指定Vue所管理的容器。...该元素根据文档的正常流程定位，然后根据顶部、右侧、底部和左侧的值，相对于其最近的滚动祖先和包含块（最近的块级祖先）进行偏移，包括与表格相关的元素。偏移不会影响任何其他元素的位置。...该值始终会创建一个新的堆叠上下文。请注意，粘性元素会 "粘附 "到离它最近的、具有 “滚动机制”（在溢出为隐藏、滚动、自动或叠加时创建）的祖先上，即使该祖先不是离它最近的、实际滚动的祖先。...粘性定位元素是一种计算位置值为粘性的元素。...它被视为相对定位元素，直到其包含块在其流根（或其滚动的容器）内越过指定阈值（如将顶部设置为自动以外的值），此时它被视为 "粘住 "元素，直到遇到其包含块的对边。

13810
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    聊聊苹果营销页中几个有趣的交互动画

    之后，元素将固定在与顶部距离 0px 的位置。...「它用了 120 张图片，根据滚动距离来画出对应的在这个滚动位置上该展示的图片」，对，你没有听错。我之前也以为应该是 css3 控制盖的角度从而实现翻盖效果的，是我想多了，哈哈哈。 ?...「在进行动画的时候，canvas 包裹容器应该是 sticky 定位在视口中的，直到动画结束，canvas 包裹容器才会随着滚动条滚动。」...').height() / 2; 最小的偏移距离，应该是在 curScale 为 scaleRadio 时，包裹元素距离视口顶部的距离，这个时候，我们就需要用到之前提到的视屏图片到电脑外壳的 top =...18px 这个值了，因为图片进行了放大，所以最小的偏移距离应该为： miniTranslate = - 18 * scaleRadio ❝所以偏移距离的区间应该是 miniTranslate ～ StartScale

    1.9K60

    CSS粘性定位是怎样工作的

    粘性元素 —— 是我们用位置定义的 position: sticky 样式。 当视口位置与位置定义匹配时，该元素将会浮动，例如： top: 0px 。 例： ?...粘性容器 —— 是包装粘性元素的 HTML 元素。 这是粘性元素可以浮动的最大区域。 当你定义一个具有 position:sticky 样式的元素时，父元素会被自动定义为粘性容器！...容器是粘性元素的范围，并且该元素无法离开其所在的粘性容器。 这就是为什么在前面的例子中，粘性元素没有被粘住的原因：这个粘性元素是粘性容器中唯一的子元素。 CSS 粘性定位的示意图： ?...绝对 —— 在粘贴区域的末尾，元素会停止，并堆叠在另一个元素的顶部，就像一个绝对定位的元素被放在一个 position: relative 容器内的行为。 粘在底部？...这意味着你可以把页脚定义为粘性，并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时，元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。

    1.8K10

    Bootstrap源码分析之transition、affix

    3.2、Affix：在页面中部的时候会添加的样式 3.3、Affix-bottom：在页面底部的时候会添加的样式 4、处理公式： 1、Top：traget的滚动条高度（scrollTop）离顶位置的距离...（offsetTop）（首次判断）     1.1、scrollTop设置为：元素本身定位的top（元素当前定位离文档原点的距离）（非首次） 2、getPinnedOffset：获取粘住元素top –...   3.1、如果是非首次bottom定位       3.1.1、如果offsetTop（元素设定离顶位置的距离）不为空，target的top 　＋　getpinnedOffset的值 > 粘住元素当前定位到...top的值       3.1.2、如果offsetTop为空，target的top 　　＋ target元素的高度 > 文档高度 – 粘住元素距离底部的高度 4、能改变粘住元素的只有他的top，top...值为：文档高度 — 粘住元素高度 — 粘住元素距离底部的高度 5、坑之所在： 1、top和bottom一起使用的时候，会出现冲突，原因：     Affix-bottom，也就是到达页面底部的时候，

    1.5K70

    CSS粘性定位 - 它的真正工作原理！

    CSS Sticky 定位的真正工作原理！ CSS 的 sticky 定位有两个主要部分，即粘性元素和粘性容器。 粘性元素 - 是我们使用 position: sticky 样式定义的元素。...当你使用 position: sticky 定义一个元素时，自动定义了父元素为粘性容器！ 记住这一点非常重要！容器是粘性项目的作用域，项目无法离开其粘性容器。...这就是前面例子中，粘性元素一开始就没有粘住的原因：粘性元素是粘性容器中唯一的子元素。...Absolute 定位 - 在粘附区域的末尾，元素停止并堆叠在另一个元素的顶部，就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部？...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

    30620

    【Web前端】“CSS 定位”如何工作？（补充）

    元素相对于它的默认位置被移动了50px到右边和20px到底部。...粘性定位 粘性定位是一种相对定位和固定定位的结合。通过设置 ​​position: sticky;​​，元素在滚动时会在某个阈值内相对位置固定，一旦滚动超过阈值，元素会跟随滚动继续移动。​​...top​​、​​bottom​​、​​left​​ 和 ​​right​​​ 属性用来设置粘性位置的阈值。 滚动页面查看效果 示例中粘性定位的元素会在视口顶部粘住，直到滚动超过它的容器。...top​​：设置元素距离其定位上下文顶部的距离。 ​​bottom​​：设置元素距离其定位上下文底部的距离。 ​​left​​：设置元素距离其定位上下文左边的距离。 ​​

    9410

    javascript实例：逐条记录停顿的走马灯

    效果： 需求： 1.记录循环滚动； 2.每组记录之间不能有留白； 3.每条记录上移到容器的顶部时要停顿一下； 4.鼠标移入容器时停止滚动，移出时继续滚动。...我的思路是：当最顶的记录完全移出容器时，把该记录移动到所有记录的底部 (图很丑但很温柔^_^) 下面是实现：(ie6、7、8，chrome都OK！)...： （1）offsetTop指的是元素上外边框离父容器上外边框的Y轴距离（单位px）；style.top指的是元素上外边框离自己原来位置上外边框的Y轴距离（单位px）。...当容器的position设置为relative时子元素的offsetTop才是子元素离容器上边框的距离，否则为子元素离浏览器工作区上边框的距离。...因为offsetTop为只读，最终控制元素位置要用style.top，而两者表达的含义又有所区别，所以这里我直接用style.top来获取定位和设置定位。

    1.5K50

    Android开发第三讲,布局管理器

    android:layout_margin 外边距,表示我这个控件距离外部边距是多少 android:layout_padding 内边距,距离内部元素的距离是多少.比如你设置20dp那么内部距离外部就要有...用到的一些重要的属性： 一、相对于父容器而言的属性 android:layout_centerInparent 相对于父容器完全居中 android:layout_alignParentTop...贴紧父容器的左边 android:layout_alignParentRight 贴紧容器的右边 二、相对于控件而言的属性 android:layout_below...三、属性值为具体的像素值 android:layout_marginTop 离某元素上边缘的距离 android:layout_marginBottom 离某元素底边缘的距离 android:layout_marginLeft...离某元素左边缘的距离 android:layout_marginRight 离某元素右边缘的距离 Xml 数据如下 <?

    80410

    Framer 滚动动画效果集合 (讲解)

    ==> 右侧属性面板找到Effect ==> 添加一个Scroll Transform ==> 点击Transfrom 进行属性编辑 Form 从opacity透明度0.1 的状态下,并且初始位置在原来位置向左偏移...Transform), 在编辑页面,设置3d的X方向的值 第三个效果, 滚动时,重叠的多张图片向四个方向进行偏移 具体步骤: 设置每个图片为绝对定位,然后依次叠放在一起,并且左侧拉开一小段距离 给每个图片添加一个滚动过渡...然后下面的标题从大变小,图片从小到大, 并且在滚动到这个部分的底部的时候,滚动动画完成 图片的变化和 下面的文本,图片状态变化是同步的,也就是说触发的时机是一致的 实操: 粘性定位 首先设置图片所在的层的布局方式为粘性布局...即sticky, 下面的top属性选择-600,即到了该层的h600px的位置粘性. (可能我表达的不准确,欢迎大家纠正.)...要制作粘性标题，请选择它并转到属性面板，您可以在其中找到 Sticky 属性。在这里，您将看到四个位置属性，用于自定义其与顶部、底部、左侧和右侧的距离。这些属性表示粘性元素相对于其父层的位置。

    14010

    css学习笔记，持续记录。

    粘性定位sticky 粘性定位sticky是fixed和relative的结合，例如top:0，不为0是为relative，当距离父元素的顶部为0是转换为fixed，存在兼容性问题； div.sticky...苹果手机底部安全区 苹果手机底部安全区：env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left...：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom...：安全距离底部边界的距离 而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，...最小宽高，防止图片加载导致抖动 场景：加载前图片所在容器为10px，图片为50px，图片加载后撑开盒子，导致二次布局变化（抖动） 给图片的上层容器加个最小宽高，防止页面加载图片前后导致长宽变化，页面发生抖动

    2.7K60

    什么是BFC

    2019-06-05 17:36:43 BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。...可以知道sticky属性有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...亦即如果你设置了top:50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量 这个东西很好的应用就是导航栏吸顶效果，但是比较蛋疼的是这个属性的兼容性还不是很好...它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

    85520

    css粘性定位sticky

    前言 发现很多博客的侧边栏可以跟随滚动条移动到底部又可以继续翻看侧边栏，F12看了下代码，仅仅是用了一个sticky定位，下边我简单说一下sticky定位 内容简介： 讲 sticky 定位之前，我先说一下...relative 生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。...inherit规定应该从父元素继承 position 属性的值。 sticky的使用 粘性定位可以被认为是相对定位和固定定位的混合。...元素在跨越特定阈值前为相对定位，之后为固定定位,设置了以上样式的元素，在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。...之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

    1.1K10

    CSS定位特性

    bottom bottom:80px 底部偏移量，定位元素相对于其父元素下边线的距离 left left:80px 左部偏移量，定位元素相对于其父元素左边线的距离 right right：80px 右部偏移量...，定位元素相对于其父元素右边线的距离 相对定位 是元素在移动位置的时候，相对于原来的位置来说的 选择器{position：relative；} 绝对定位 在移动的时候，相对于它的祖先元素来说的 选择器...{position：absolute；} 三个特点： 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位 如果祖先元素有定位，则以最近一级有定位祖先元素为参考点移动位置 绝对定位不占有原先的位置...：先left:50%;，再让固定定位的盒子margin-left:版心宽度的一半； 粘性定位 滑到某个位置时，盒子固定 position:sticky; top:10px; 特点： 以浏览器可视窗口为参照点移动元素...粘性定位占有原先的位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index的值来确定哪个靠上面 数值越大，盒子越靠上，可正可负 {z-index:2;} 绝对定位的盒子居中 加了绝对定位的盒子不能通过

    58740

    CSS 面试要点：定位(Positioning)

    同时，元素的位置发生变化，top，bottom，left 和 right 以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的分析。...结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且 元素也被包含在这个容器里面。...绝对定位元素在 HTML 源代码中，是被放在 中的，但是在最终的布局里面，它离页面 (而不是 ) 的左边界、上边界有 30px 的距离。...可以改变定位上下文 —— 绝对定位的元素的相对位置元素。...https://codepen.io/cellinlab/pen/dydgwGp # 粘性定位 position: sticky，基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样

    60210

    记录--Echart配置参数介绍

    所属组件的 z 分层，z 值小的图形会被 z 值大的图形覆盖 left:"10%", // 组件离容器左侧的距离，百分比字符串或整型数字 top:60..., // 组件离容器上侧的距离，百分比字符串或整型数字 right:"auto", // 组件离容器右侧的距离...，百分比字符串或整型数字 bottom:"auto", // 组件离容器下侧的距离，百分比字符串或整型数字 width:"auto",...position: ['50%', '50%'], // 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置，[10, 10], 回掉函数，inside 鼠标所在图形的内部中心位置，top、left...可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

    24110
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券