css定位 position：sticky

最新推荐文章于 2024-12-08 12:04:53 发布
最新推荐文章于 2024-12-08 12:04:53 发布
阅读量336 收藏 1
点赞数
分类专栏： HTML 文章标签： css 定位 position sticky
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cvper/article/details/79744619
版权

定位有各种各样的类型，我们来看看这个sticky ( 尽管兼容性有些问题，但是却很好用  )；

先来演示一下：

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >position </ title >
< style type = "text/css" >
* {
margin : 0 ;
padding : 0 ;
}
.space {
width : 100 % ;
height : 150 px ;
background-color :orange;
}
.test {
width : 100 % ;
height : 200 px ;
background : #000 ;
position :-webkit-sticky;
position :sticky;
top : 0 px ;
}
< / style >
</ head>
< body>
< div class= "space" >橘黄色区域 </ div >
< div class= "test" >sticky部分 </ div >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
</ body>
</ html>


直接看效果就行了，重点在于top值，top值为零，那么到顶部就固定了，

如果top值为10px，那么离顶部还有10px 的地方就会固定，这就是sticky;


如果不用这个，我们还需要监听然后处理，还是挺麻烦的；

（使用原生js实现，我们利用：var temp = document.documentElement.scrollTop 

即可获取滚动的距离大小）

                                       

sticky虽然好用，但是要注意兼容性啊！

详解CSS粘性定位 sticky
12-11
前言： position:sticky是css定位新增属性； 可以说是static（没有定位） 和 固定定位fixed 的结合； 它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)； position:sticky这时的效果相当于fixed定位，固定到适当位置 讲 sticky 定位之前，我先说一下position 的其他定位， absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的 位置通过"left", "top", "right" 以及 "
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
CSS position的sticky定位
qq_53612668的博客
10-31 627
position: sticky -粘性定位(是css新增的一个position属性) 使用注意事项： 父元素不能有 overflow 属性 left、top、right、bottom必须要设置一个 仅在父元素内生效，父元素的高度必须大于sticky元素设置的高度 简单理解就是，当你页面滚动的距离小于你设置的 left、top、right、bottom的值时 position: sticky 就相当于 position:relative 当你页面滚...
css之sticky定位
Kratial的博客
10-08 8366
css之sticky定位
CSS——sticky定位
weixin_43599321的博客
12-08 2187
粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段
CSS布局：sticky定位
vvull的博客
08-05 231
CSS布局：sticky定位 stick定位 一如其名：它随“正常”文档流而动，直到规定位置，尔后“粘”在那里；或者，当它发现自己可以跟随“正常”文档流而脱离sticky位置时，就果断离开从而加入文档流。 ...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
css3 position定位—— sticky 定位
weixin_48813932的博客
03-24 1556
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
CSS：深入理解粘性定位 position: sticky
热门推荐
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
CSS position: sticky; 粘性定位初识
MrLiber的博客
12-13 4018
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 #box { position: sticky; top: 10px; }...
【CSS 面经】对 sticky 定位的理解
最新发布
lph159的博客
12-08 2178
sticky定位是 CSS 中的一种布局方式，它允许元素在滚动过程中“粘附”到视口的某个位置。与relative定位类似，sticky元素初始时相对于其父元素的位置布局，而当页面滚动超过一定阈值后，元素会变为fixed定位，固定在视口的某个位置，直到父元素的边界被滚动到视口外，元素才恢复为相对定位。简单来说，sticky定位可以让元素在页面滚动时粘贴在视口上，保持一定的相对位置。
CSS定位（absolute/relative/fixed/static /sticky定位）
zhp19513507633的博客
07-24 173
position有四个值：absolute/relative/fixed/static /sticky(绝对/相对/固定/静态(默认/粘性))通过定位属性可以设置一些不规则的布局
CSS 粘性布局sticky：使用方法+代码示例
大剑师兰特的GIS世界
03-14 5872
CSS 中的 `position: sticky` 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 `position: sticky` 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 624
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
position:sticky新特性
EmotionComputer
08-08 1618
一、Chrome杀了个回马枪 position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。 Safari目前还需要-webkit-私有前缀。 二、position:sticky简介 单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，
Refused to execute script from ‘http://127.0.0.1:8080/src/js/jquery.js‘ because its MIME type (‘text
qq_47099087的博客
09-15 909
官网static配置项的默认值是public，而在public目录中并没有对应的文件，所以会找不到。解决办法就是给static设置src即可。如果请求连接的话会返回can not get xxx，这是因为根据请求地址拿不到文件.原因是在webpack-dev-server配置中没有配对应的static路径根据。跑了一下之前写的demo报了下面的错。
CSS定位（position））之sticky 定位
Serena_tz的博客
02-25 2487
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bo
在css中sticky定位的特性,CSS定位属性sticky详解
weixin_36076907的博客
08-03 1187
以往，如果有以下需求，对于某一个导航栏(或搜索框)，刚开始是相对定位于一个父容器盒子里面，但是当我们滚动页面到一定程度时，需要将该部分变为固定定位显示，方便使用。http://www.jq22.com/demo/jQuery.positionSticky-master/对于这样的效果，以前我们通常是借用jquery插件来完成，但是CSS新增了一个sticky定位，使用它就能不利用JS来完成该需求：...
css粘性定位position:sticky问题采坑
06-28
CSS粘性定位（position:sticky）是一种新的定位方式，它可以在不同滚动位置下保留元素位置，使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前，不支持CSS粘性定位的浏览器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值