停留在页面顶部时使导航栏透明吗？答案

【问题标题】：Make nav bar transparent when resting at the top of the page?停留在页面顶部时使导航栏透明吗？
【发布时间】：2022-08-15 04:28:19
【问题描述】：

对于我的网站，我希望将导航栏背景颜色设置为透明，而我位于页面的最顶部，并且是偶像。但是，当我向下滚动时，我希望它再次显示为白色。尽管背景颜色是透明的，但文本/页面标签仍然存在。这是到目前为止的样子：

Nav bar

我希望它类似于 elgato 的导航栏，它在页面顶部的偶像上是透明的。这是迄今为止的 CSS 代码（它还与 Liquid 混合，一种 shopify 上的语言）。

/* section-header */
#shopify-section-header {
  z-index: 3;
  background-color: rgba(255,255,255,0.5)
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  transform: translateY(-100%);
}

.shopify-section-header-hidden.menu-open {
  transform: translateY(0);
}

#shopify-section-header.animate {
  transition: transform 0.15s ease-out;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
  
  
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: \'left-icon heading icons\';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

对此的任何帮助将不胜感激！

标签： html css json shopify liquid

【解决方案1】：

给你。您需要检测用户何时滚动以更新标题样式

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the solid class to the header when you reach its scroll position. Remove "solid" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("solid");
  } else {
    header.classList.remove("solid");
  }
}

body { background-color: gray; }

header {
height: 75px;
width: 100%;
position: sticky;
top: 20px;
transition: all 0.5s;
background-color: lightblue;
}

header.solid {
background-color: darkgray;
}

.tall {
width: 100%;
height: 1500px;
}

<header id="myHeader"><span>The Header</span></header>

<div class="tall">
<p>Tall DIV</p>
</div>

【讨论】：

谢谢你！在哪个页面添加功能？ // 我把函数放在哪里> 我只有 index.json、header.liquid 等
啊，是的，你正在使用shopify。您可以将它添加到您正在编辑 HTML 的页面中。不过，您可能希望将其放在脚本标签中。 <script> -----JS Code Here------ </script> 这是shopify关于添加JS代码的论坛community.shopify.com/c/shopify-discussions/…
这确实有效！现在唯一的问题是，当导航栏在顶部是透明的时，由于图像不是导航背景的一部分，导航栏在顶部时只是白色的。如何使导航栏与背景图像重叠？
你可能有几个选择。您可以将背景颜色添加到标题元素，使其具有在滚动时淡出的颜色，或整个正文的背景颜色。不过，做标题可能更安全。我为你更新了我的 sn-p！还有一个变化是 body 有 margin 给了 header 所在的空白区域。