Affix 固釘

讓元素在頁面捲動時固定在指定位置(頂部或底部)。使用 Element Plus 的 el-affix。

設計準則

用來固定「捲動時仍需隨手可用」的東西:頁內導覽(Anchor)、長表單的操作列、篩選工具列
offset 對齊固定表頭:若頁面已有 sticky header,offset 設成 header 高度,固釘才不會疊到 header 上
限定範圍用 target:只想在某個區塊內固定時,target 指向該容器,超出範圍會自動收起,不會霸佔整頁
底部操作列用 position="bottom":例如長表單最底的「儲存 / 取消」
固釘的東西要精簡;一個畫面不要同時固定太多條,否則內容區被擠壓

基本用法(固定於頂部)

捲動整頁時,元素會固定在距離視窗頂部 offset 的位置。請往下捲動整個頁面觀察效果。

限定容器範圍(target)

target 指向某個捲動容器,固釘只在該容器範圍內生效,容器捲離畫面後會自動跟著收起:

vue

<template>
  <div class="my-scroll-area">
    <el-affix target=".my-scroll-area" :offset="80">
      <el-button type="primary">只在這個區塊內固定</el-button>
    </el-affix>
    <!-- 很長的內容 -->
  </div>
</template>

固定於底部(position）

底部操作列(例如長表單最底的「儲存 / 取消」)用 position="bottom":

vue

<template>
  <el-affix :offset="20" position="bottom">
    <el-button type="primary">距底 20px 固定</el-button>
  </el-affix>
</template>

說明:固釘是相對「瀏覽器視窗」固定的元件。本規範站的範例是內嵌在文章中呈現,target 限定與 position="bottom" 兩個變體內嵌時會浮動遮住內文,因此以程式碼呈現;實際放進產品頁面中運作正常。

Do / Don't

✅ Do	❌ Don't
`offset` 對齊固定表頭	固釘疊到 header 上互相遮擋
用 `target` 限定範圍	區塊型工具霸佔整頁不放
只固定精簡、常用的元素	一次固定好幾條擠壓內容

給工程師

常用 props:offset(距離,預設 0)、position(top / bottom)、target(限定容器的 CSS 選擇器)、z-index(預設 100)
事件:@change(固定狀態切換時)、@scroll(捲動時,回傳 scrollTop 與 fixed 狀態)
搭配 Anchor 做「固定的頁內導覽」;搭配長表單做「固定的底部操作列」
完整 API 見 Element Plus Affix 文件。本站規範優先於 EP 文件中的視覺建議。

Affix 固釘 ​

設計準則 ​

基本用法(固定於頂部) ​

限定容器範圍(target) ​

固定於底部(position） ​

Do / Don't ​