对于CSS position属性不少朋友应该都不陌生，这篇文章我们来了解position: sticky的相关内容，一些朋友可能对sticky比较陌生，不知道sticky可以做什么及用法是什么，对此下面小编就给大家来详细的介绍一下，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

    在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现

    我不是最后一个知道的：position: sticky

    position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性

    position:sticky用法

• position:sticky 被称为粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
• 简单的理解就是：在目标区域以内，它的行为就像 position:relative;在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
• 可以说是相对定位relative和固定定位fixed的结合
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。  

    position:sticky 使用条件

    1.父元素不能overflow:hidden或者overflow:auto属性。 2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 3.父元素的高度不能低于sticky元素的高度 4、sticky元素仅在其父元素内生效

    例子

    当鼠标下滑到一定高度时，触发position:sticky定位的要求，让“流行，新款，精选”固定为距离顶部44px的地方。

 

    css代码

.tab-control{
  position: sticky;
  top: 44px;
}

    html区域

<tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>

    在web开发中注意兼容性：

    sticky目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图，基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari

 

总结

    现在大家对于CSS position属性取值sticky的用处及用法应该都清楚了吧，上述示例有一定的参考价值，有需要的朋友可以了解看看，希望对大家学习CSS有帮助，想要了解更多position属性的使用，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 浅谈CSS中四大类选择器的使用，你知道多少？

  这篇文章给大家分享的是CSS选择器的使用，CSS中选择器主要分为：基本选择器、属性选择器、组合选择器与伪类选择器四个大类，下文介绍了他们的使用，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起学习一下吧。

• CSS流的定义以及主要的作用是什么

  css中流的概念介绍：​1、流又称文档流，是css的基本定位和布局机制。2、脱离文档流是指节点脱离正常文档流后，正常文档流中的其他节点将忽略该节点，并填补其原始空间。

• HTML中JSON数据的显示问题怎么解决

  背景：有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。解决方案：其实JSON.stringify本身就可以将JSON格式化，具体的用法是：JSON.stringify(res,null,2);//res是要JSON化的对象，2是spacing如果想要效果更 ...

• CSS中align-items属性能实现什么效果，怎么应用

  align-items中的items指的是flex 中的子项，因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式。适用于所有的flex容器，单行时候垂直居中使用align-items: center。

• HTML表单元素有哪些，含义是什么

  在HTML表单元素中，关于Action 属性、Method 属性的定义你了解多少，以下是小编为此而整理的相关文章，感兴趣的小伙伴们可以看下具体操作步骤。