关于前端:CSS-position定位fixedsticky

CSS position 属性指定一个元素（动态的，绝对的，相对或固定）的定位办法，本文通过一个理论场景来剖析一下 fixed，sticky 的区别。

定义回顾

• fixed 生成固定定位的元素，绝对于浏览器窗口进行定位。元素的地位通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• sticky 粘性定位，该定位基于用户滚动的地位。它的行为就像 position:relative; 而当页面滚动超出指标区域时，它的体现就像 position:fixed;，它会固定在指标地位。

场景形容

页面须要有一个工具条悬浮在容器顶部，别离应用 fixed，sticky 实现，如下图所示：

应用 fixed 定位发现 fixed_bar 超出了父级容器的宽度，如果你刚好是在这种状况下想让 fixed_bar 宽度为父级的 100%，那么刚好戳中了你的痛点。而且父级容器在向上滚动的时候，你还须要在 scroll 事件中动静扭转 fixed_bar 的 top 值 —— 堪称“麻烦的一匹”。反观 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>

总结

如果元素是窗口宽度的 100%，且起始地位就是固定顶部或底部，那么 fixed 定位可能比拟适合。如果元素是要在父容器（小于窗口宽度）中滚动一段距离悬浮，那么应用 sticky 可能比拟容易。