购物 | 首次亮相主题静态标题反弹

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;
}