how to get total opacity for sticky navbar to the top using locomotive-scroll?

Question

How to make background fully opaque? I have managed to stick main to the top but it's background is invisible.

HTML

<main>
  <div data-scroll-container>
    <div class="bg">
      <h1 data-scroll-sticky>Hey</h1>
    </div>
  </div>
</main>

CSS

.bg {
  background-color: red;
}

Javascript

const locoScroll = new LocomotiveScroll({
  el: document.querySelector("main"),
  smooth: true
});

Answer 1

HTML

<main>
  <div class="bg" id="menu" data-scroll-sticky>
    <h1>Menu</h1>
  </div>
  <div id="section-1" data-scroll-section></div>
  <div id="section-2" data-scroll-section></div>
</main>

CSS

#menu {
  background-color: brown;
  min-height: 10dvh;
  position: sticky;
  overflow: hidden;
  z-index: 1;
}
#section-1 {
  background-color: orange;
  min-height: 100dvh;
}
#section-2 {
  background-color: brown;
  min-height: 100dvh;
}

Javascript

const locoScroll = new LocomotiveScroll({
  el: document.querySelector("main"),
  smooth: true
});