Shopify 主題中的浮動（黏性）標題

浮動（黏性）標頭使網站導航更簡便。從技術角度來看，這種技術最常通過JavaScript 程式碼實現。但也可以使用簡單的CSS 規則來創建黏性標頭，本文將介紹這種方法。

在您的 Shopify 商店中創建浮動標頭，主要需要的 CSS 指令如下：

position: sticky;

這種解決方案的簡單性也帶來一些缺點：

• 無法在標頭從固定狀態切換到浮動狀態時應用動畫效果。
• 無法選擇標頭中哪些區塊應該是浮動的，哪些保持固定。例如，如果您的主題標頭中包含文字公告或網站導航，這些區塊都會隨整個標頭一起浮動。
• 瀏覽器對 sticky 屬性的支援並非完全。大多數舊版本瀏覽器不支援此屬性。這意味著在這些瀏覽器中，您的標頭會保持固定狀態，就像未使用 "sticky" 屬性一樣。目前約有95%的瀏覽器用戶可正常使用此屬性。您可以在此處查看最新的 sticky 屬性支援資訊。

如果您在商店中安裝了其中一款免費的Shopify 主題，且該主題未實現浮動標頭技術，只需將以下程式碼添加到主題的header.liquid區段（檔案開頭或結尾皆可）：

<style>
#shopify-section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: white; /* 指定標頭背景色，以防透明 */
}
</style>

如果您的商店使用的是自訂或付費主題，建議聯繫主題開發者或客服支援。或者，您也可以在評論中留下您的商店連結，我們將協助您尋找解決方案。