position: sticky的使用

属性效果
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同
实例：

.sticky {position: sticky;top: 0;
}

sticky不生效原因有：

父元素设置了overflow:hidden或者overflow:auto
未指定top、right、bottom、left4个值中的任意一个
父元素高度小于sticky定位的元素高度

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sticky</title>
<style>
div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;
}
</style>
</head>
<body><p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p>
</div></body>
</html>

position: sticky的使用相关推荐

position:sticky 的 polyfill——stickyfill 源码浅析
本人最近在修改 blogsue 中的样式时,使用到了 position: sticky.话不多说,开始主要内容. 定义 position: sticky 是 CSS position 属性的一个新值. ...
当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录
当第一次接触到 position:sticky 这个属性,我就意识到之前的不少 js 场景可以用这个 css 属性去改写.譬如网站右侧的不少广告,滚动上去后需要 fixed,完全就是 sticky ...
IOS6+ 下，使用position:sticky实现粘性布局
回顾一下开通博客之后,潦草的写了几篇,之后由于没时间,加上文笔不好等等(好吧,都是借口),基本上就没怎么写过了,其实平时也做了一些记录,但就是犯懒,没有去整理.现在打算重新开始了,记录一些自己学习过 ...
[css] 说说position:sticky有什么应用场景
[css] 说说position:sticky有什么应用场景吸顶效果个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试 ...
使用 position: sticky 达到粘性元素区域悬浮效果
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上.还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者粘性 ...
position:sticky布局
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
position: sticky 属性
关于 position 属性主要有五个值: static relative fixed absolute sticky 常见的就是 relative 和 absolute 这两个属性. relativ ...
纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
position: -webkit-sticky； /* for Safari */ position: sticky；
<div >Chrome杀了个回马枪</a><a href="javascript:">position:sticky简介</a>& ...
position:sticky 粘性定位 (sticky) 与固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...

position: sticky的使用

position: sticky的使用相关推荐

最新文章

热门文章