sticky粘性布局

最新推荐文章于 2024-03-14 00:15:00 发布
最新推荐文章于 2024-03-14 00:15:00 发布
阅读量481 收藏
点赞数
分类专栏： css
本文链接：https://blog.csdn.net/sufubo/article/details/103733257
版权

这个布局对于移动端非常好用，他是相对于他最近的滚动祖先，和最近的块级组件进行top，left，bottom，right值进行偏移。偏移值不会影响其他元素。就好像该元素是fixed定位一样。

该值总是要创建一个新的层叠上下文，当他最近的一个拥有滚动机制的祖先上（当祖先是overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为

vieber
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS使用position:sticky 实现粘性布局的方法
12-14
简介 前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇– position属性讲解》 一般都知道下面几个常用的： { position: static; position: relative; position: absolute;...估计大部分都没有用过position
sticky-粘性布局
weixin_45190306的博客
08-21 2605
position: sticky; sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。特别适合导航的跟随定位效果。 基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。 特性 position:sticky有个非常重要的特性，那就...
position:sticky；粘性布局
CodingNoob
12-06 2400
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
CSS定位（position））之sticky 定位
Serena_tz的博客
02-25 2341
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bo
position:sticky粘性定位的几种巧妙应用与理解。
热门推荐
小祥编程擅长前端
09-14 2万+
position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。粘性定位可以被认为是相对定位和固定定位的混合元素在跨越特定位偏移之前为相对定位，之后为固定定位。top: 50px;}设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于50px之前，div为相对定位。之后元素将固定在与顶部距离50px的位置，直到viewport视口回滚到50px以内。
CSS 粘性布局sticky：使用方法+代码示例
最新发布
大剑师兰特的GIS世界
03-14 2466
CSS 中的 `position: sticky` 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 `position: sticky` 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。
position:sticky 实现粘性布局
11-16
css 样式 position:sticky 实现粘性布局
Android-反编译简书app滑动效果sticky粘性头布局的实现CoordinatorLayoutbehavior
08-13
在Android开发中，创建引人入胜的用户体验是至关重要的，而`Sticky Header`（粘性头布局）就是一种可以提升用户交互性的设计。在本文中，我们将深入探讨如何通过反编译简书App来学习和实现这种滑动效果，特别是涉及...
仿QQ的粘性布局
05-31
在IT行业中，粘性布局（Sticky Layout）是一种常见的用户界面设计模式，它允许特定的元素在滚动到屏幕顶部时固定在屏幕上，直至其他元素覆盖或滚动到底部。这种布局方式在许多应用中都能见到，比如QQ应用中的未读...
实现Sticky Footer布局的 4 种方式
一碗周
01-02 1286
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) Sticky Footer布局概述 所谓的 Sticky Footer 布局并不是一种新的前端技术和概念，它就是一种网页布局。
Vue 2.0组件设计-Sticky布局
越陌度阡
04-28 545
Sticky布局即为粘性定位，常见于一些重要的页面区域在向上滚动时不会被卷起来，在CSS中可以通过设置position:sticky来实现这一功能，但是如果出于兼容性考虑或是一些复杂的场景，就需要我们用传统的方法来实现，以下基于Vue封装一个组件给大家参考。
72_粘滞定位（根据用户的滚动位置进行定位）
述安的博客
08-20 370
position: sticky;粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。
实现粘性布局position:sticky
浮游的博客
03-07 1349
对于粘性定位这个概念，很多人都没有注意到，所以写这篇文章总结一下。粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？
使用 position:sticky 实现粘性布局
weixin_34143774的博客
02-15 1211
如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ p...
前端实现sticky布局
云之彼端的博客
07-28 438
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。Header和body内容足够多，超过屏幕的显示时，Footer随着文档流布局显示在最下方，这样的布局被称做sticky footer布局。scrollTop 是这个元素的内容顶部到它的视口可见内容（的顶部）的距离的度量。
【CSS 布局】 Sticky Footer布局
我有满天星辰的博客
02-13 859
Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。
css 粘性布局
Novice-XiaoSong的博客
10-31 1万+
一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 二、坑 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效 （1）必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛） （2）父元素中不能设置 overflow: hidden 或 overf
好用不难的粘性布局 position:sticky
问白的博客
11-07 7492
背景 最近项目中遇到一个需求大体是在一个复杂表格中实现滚动的时候，第一行是置顶固定不动，其余行正常滚动，有点类似于表格左右滚动的时候设置了固定列的效果一样。但是在现在的ui库中不管是antd, ele ui还是material-ui中都没有设置固定行的效果，最多是可以设置固定列。后来在github上了解到 antd 不做这种效果的原因是这样会多出很多复杂的计算，担心会影响页面性能，后来就用posi...
粘性布局 以及粘性布局失效问题
paidaboluo的博客
07-27 2800
粘性布局 以及粘性布局失效问题
vant sticky 粘性布局
05-24
Vant 是一个基于 Vue.js 的移动端组件库，而 sticky 粘性布局是其中一种常用的布局方式。该布局方式可以让元素在滚动时“粘”在页面的指定位置，常用于顶部导航栏、侧边栏等固定位置的元素。 在 Vant 中，可以使用 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值