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

Questions

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

May 9, 2023

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" />