購物 | 首次亮相主題靜態標題反彈

Question

我正在 Shopify 上編輯 Debut 主題。 我想讓標題靜態，所以我在這里找到了這個教程： https : //community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/mp/518018/高亮/真#M132407

一切都按預期工作，直到所有內容都加載完畢，此時它會“彈跳”以將主要內容定位在標題下。 我試圖找到原因，我意識到刪除$(window).on("load", headerSize); 從下面的代碼停止它，但不重新定位它。 我不知道如何使用 JavaScript，我假設我必須在現有代碼上設置更短的動畫或某種計時器，以便立即加載頁面，或者在用戶沒有注意到反彈的情況下。

JavaScript：

function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

Answer 1

實現您想要的最簡單方法是在 css 文件底部添加以下內容：

#shopify-section-header {
  z-index: 999999;
  position:fixed;
}