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

Question

我正在 Shopify 上编辑 Debut 主题。我想让标题静态所以我在这里找到了这个教程：https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-p/518018/highlight/true#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;
}