CSS position定位（fixed、sticky）

來了老弟發表於2022-11-23
CSS
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可能比較容易。

相關文章