1
头图
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>

总结

如果你要定位的元素是以窗口为参照,那么fixed定位可能比较合适。如果元素是要在父容器(一般小于窗口宽度)中滚动一段距离悬浮,那么使用sticky可能比较容易。


来了老弟
508 声望31 粉丝

纸上得来终觉浅,绝知此事要躬行