內容導覽
Elementor 雙 Header 滾動切換（純 CSS + JS）
想要首頁選單「大氣吸睛」，滾動後又要「精簡固定」？
大多數人的直覺是「找外掛」，結果網站後台越來越肥，PageSpeed 分數越來越低。其實這不需要複雜工具，只要兩個容器、幾行代碼，3 分鐘就能搞定。
▋ 運作邏輯：物理切換
- 靜止狀態： 顯示 A 容器（大選單），隱藏 B 容器。
- 觸發滾動： 超過設定距離，自動隱藏 A，顯現 B。
- 回到頂部： 瞬間恢復初始樣貌。
▍ 前置準備
在貼入程式碼前，請先在 Elementor 編輯器中準備好兩個 Container (容器)：
- 容器一： 你的原始大 Header。
- 容器二： 你的精簡版 Sticky Header。
▍ Class 設定方式
選取容器，進入 「進階 (Advanced)」 > 「CSS Classes」，精準填入對應名稱：
| 容器對象 | CSS Class | 說明 |
|---|---|---|
| 預設大 Header | head-before | 頁面最上方的初始區塊 |
| 滾動後精簡 Header | head-after | 滾動觸發後取代前者 |
▋ 完整代碼：複製即用
請使用 「HTML 元件」，將以下代碼貼入頁面中：
<style>
.header-after {
display: none !important;
}
.header-after.is-show {
display: flex !important;
align-items: center;
width: 100vw !important;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.header-before.is-hide {
visibility: hidden !important;
}
</style>
<script>
(function() {
var done = false;
function initHeader() {
if (done) return;
done = true;
var headersBefore = document.querySelectorAll('.header-before');
var headerAfter = document.querySelector('.header-after:not(.elementor-sticky__spacer)');
if (!headerAfter) return;
var threshold = 150;
var isShow = false;
window.addEventListener('scroll', function() {
var y = window.scrollY;
if (!isShow && y > threshold) {
isShow = true;
headersBefore.forEach(function(el) { el.classList.add('is-hide'); });
headerAfter.classList.add('is-show');
} else if (isShow && y <= threshold) {
isShow = false;
headersBefore.forEach(function(el) { el.classList.remove('is-hide'); });
headerAfter.classList.remove('is-show');
}
}, { passive: true });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initHeader);
} else {
initHeader();
}
})();
</script>▋ 實戰細節提醒
- 容器規格： 代碼預設使用
display: flex。請確保.head-after使用的是 Container 容器，而非舊版 Section，否則排版會走鐘。 - 版面修正： 搭配 Sticky 工具時，寬度常會被限制。代碼中的
width: 100% !important是為了強制填滿，解決「版面縮成一坨」的通病。 - 觸發點：
window.scrollY > 90。建議數值設為「大 Header 的高度」，視覺銜接最自然。
—— 好的設計是為了使用，而不是為了堆疊外掛。
