Make nav bar transparent when resting at the top of the page?-CodePudding

For my website, I would like to have my navigation bar background colour set to transparent while I'm at the very top of the page, and idol. However, when I scroll down I would want it to appear as white again. Although the background colour is transparent, the text / page labels will still be there. This is what it looks like so far:

Nav bar

I would like it to be similar to elgato's navigation bar where it is transparent on idol at the top of the page. This is the code for the CSS so far (it's also mixed with Liquid, a language on 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;
}

Any help on this will be much appreciated!

CodePudding user response：

Here ya go. You need to detect when the user scrolls to update the header styles

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

header.solid {
background-color: darkgray;
}

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

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

<div >
<p>Tall DIV</p>
</div>