CSS position定位（fixed、sticky）

小小码 • 2023-07-19 18:30 • 未分类 • 阅读 142

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说CSS position定位（fixed、sticky）,希望您对编程的造诣更进一步.

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。CSS position属性默认为静态static，除此之外还有相对定位relative，绝对定位absolute，固定定位fixed，粘性定位sticky。本文通过一个实际场景来分析一下 fixed，sticky 的区别。

定义回顾

fixed 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
sticky 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。（W3C新添加，目前处于Working Draft阶段，已被大多数浏览器支持）

场景描述

页面需要有一个工具条-fixed_bar，当容器内部向上滚动时需要悬浮在容器顶部，分别使用fixed，sticky实现，如下图所示：

css position fixed sticky 的区别

使用fixed定位发现fixed_bar超出了父级容器的宽度（即使已经设置fixed_bar的宽度为父级的100%），如果你现在处于这种境地，想让fixed_bar宽度为父级的100%，那么刚好戳中了你的痛点。而且父级容器在向上滚动的时候，你还需要在scroll事件中动态改变fixed_bar的top值 —— 可谓“麻烦的一匹”。反观sticky定位可以完美满足你的要求，这应该是它出现的原因。

css position fixed sticky 在线演示

如果感兴趣，可以到上面的地址体验一下。

其他定位方式演示

贴一下我用于演示的代码：

<template>
  <div> <div class="p_wrapper" @scroll="handleScroll"> <div style="height: 50px;line-height: 50px;background-color: rgba(227,92,64,0.72)"> something... </div> <div class="fixed_bar"> fixed_bar </div> <div style="height: 1000px;line-height: 1000px;background-color: rgba(12,65,40,0.32);"> content... </div> </div> <div class="p_wrapper"> <div style="height: 50px;line-height: 50px;background-color: rgba(227,92,64,0.72)"> something... </div> <div class="sticky_bar"> sticky_bar </div> <div style="height: 1000px;line-height: 1000px;background-color: rgba(12,65,40,0.32);"> content... </div> </div> </div>
</template>

<script> export default { name: "position", mounted() { this.fixed = document.querySelector('.fixed_bar') }, data() { return { fixed: '' // fixed_bar } }, methods: { handleScroll(e) { console.log(e.target.scrollTop, this.fixed.style.top) if (e.target.scrollTop>50) { this.fixed.style.top = '50px' } else { this.fixed.style.top = 100- e.target.scrollTop + 'px' } } } } </script>

<style scoped> .p_wrapper { box-shadow: 0 0 8px 3px rgba(0,0,0, 0.15); width: 70%; margin: 50px auto; max-height: 300px; overflow-y: auto; text-align: center; color: #fff; } .fixed_bar { height: 50px; background-color: rgba(111, 66, 193, 1); line-height: 50px; position: fixed; top: 100px; width: 100%; } .sticky_bar { height: 50px; background-color: rgba(111, 66, 193, 1); line-height: 50px; position: sticky; top: 0; } </style>