这篇文章主要介绍了 CSS 粘性定位 sticky 的设置方法, 本文通过实例代码给大家介绍的非常详细, 具有一定的参考借鉴价值, 需要的朋友可以参考下.
粘性定位的设置方法是给元素添加 position: sticky;,sticky 是 CSS 定位新增属性, 类似 static(没有定位) 和 固定定位 fixed 的结合.
它主要用在对 scroll 事件的监听上, 简单来说, 在滑动过程中, 某个元素距离其父元素的距离达到 sticky 粘性定位的要求时 (比如 top:100px);(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
position:sticky 这时的效果相当于 fixed 定位, 固定到适当位置
1,sticky 的使用:
- #sticky-nav {
- position: sticky;
- top: 100px;
- }
设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可
使用条件:
父元素不能 overflow:hidden 或者 overflow:auto 属性.
必须指定 top,bottom,left,right4 个值之一, 否则只会处于相对定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素仅在其父元素内生效
2, 示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- #sticky-nav { position: sticky; top: 0px; background: skyblue; } #sticky-nav>
- ul{ list-style: none; padding: 0; margin: 0; display: flex; justify-content:
- space-around; } #sticky-nav> ul> li{ color: #fff; padding: 8px 4px; } p{
- height: 100px; line-height: 100px; margin: 6px 0; background: #eee; }
- </style>
- </head>
- <body>
- <p>
- 一段文字
- </p>
- <div id="sticky-nav">
- <ul>
- <li>
- 导航 1
- </li>
- <li>
- 导航 2
- </li>
- <li>
- 导航 3
- </li>
- <li>
- 导航 4
- </li>
- </ul>
- </div>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- <p>
- 一段文字
- </p>
- </body>
- </HTML>
效果:
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15563.html