How to align image to top of viewport and overlay other elements on top of it

Advertisements

I have a heading component that includes a skinny menu (that hides on scroll down) and a sticky nav (that is visible at all times, and when the skinny menu is hidden: sticks to top and increases in size).

I have an img that should always be visible through the sticky-nav (it currently only is visible when the sticky-nav is stuck). How can I update my heading component to allow for it to be positioned "on top of" other elements on the page, so they can be visible as a background of the sticky-nav?

Desired outcome (at all times): 

      const wrapper = document.querySelector('.wrapper');
      const skinnyBanner = document.querySelector('.skinny-banner');
      let previousScrollY = window.scrollY;

      function updateSticky() {
        const currentScrollY = window.scrollY;

        if (currentScrollY > skinnyBanner.offsetHeight) {
          wrapper.classList.add('isSticky');
        } else {
          wrapper.classList.remove('isSticky');
        }

        previousScrollY = currentScrollY;
      }

      window.addEventListener('scroll', updateSticky);
body {
  margin: 0;
  height: 200vh;
}

.skinny-banner {
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav {
  background: salmon;
  padding: 0 16px;
  height: 120px;
  opacity: 50%;
  backdrop-filter: blur(20px);
}

.sticky-nav ul {
  display: flex;
}


/* styles for when the header is in sticky mode */

.wrapper.isSticky .sticky-nav {
  position: fixed;
  top: 0;
  height: 66px;
  width: 100%;
}

.wrapper.isSticky .skinny-banner {
  display: none;
}
  <header>
    <div class="wrapper">
      <div class="skinny-banner">Skinny banner that on scroll down disappears.</div>
      <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck
      <ul>
      <li>Flex items</li>
      </ul>
      </div>
    </div>
  </header>
  
  <img src="https://placekitten.com/1440/671" />

>Solution :

Just give the position absolute and width: 100% by default to the .sticky-nav. Here is the updated code:-

      const wrapper = document.querySelector('.wrapper');
      const skinnyBanner = document.querySelector('.skinny-banner');
      let previousScrollY = window.scrollY;

      function updateSticky() {
        const currentScrollY = window.scrollY;

        if (currentScrollY > skinnyBanner.offsetHeight) {
          wrapper.classList.add('isSticky');
        } else {
          wrapper.classList.remove('isSticky');
        }

        previousScrollY = currentScrollY;
      }

      window.addEventListener('scroll', updateSticky);
body {
  margin: 0;
  height: 200vh;
}

.skinny-banner {
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav {
  position: absolute;
  width: 100%;
  background: salmon;
  padding: 0 16px;
  height: 120px;
  opacity: 50%;
  backdrop-filter: blur(20px);
}

.sticky-nav ul {
  display: flex;
}


/* styles for when the header is in sticky mode */

.wrapper.isSticky .sticky-nav {
  position: fixed;
  top: 0;
  height: 66px;
}

.wrapper.isSticky .skinny-banner {
  display: none;
}
  <header>
    <div class="wrapper">
      <div class="skinny-banner">Skinny banner that on scroll down disappears.</div>
      <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck
      <ul>
      <li>Flex items</li>
      </ul>
      </div>
    </div>
  </header>
  
  <img src="https://placekitten.com/1440/671" />

Leave a ReplyCancel reply