JSFiddle - React, Tailwind, and code Playground

HTML

<aside>

  <div id="wrap">

    <div id="border">
      <nav id='nav'></nav>
    </div>

  </div>

</aside>


<main></main>

CSS

body {
  margin: 0;
  padding: 0;
}

main {
  height: 3000px;
  background: url("https://st.depositphotos.com/2236871/3063/v/450/depositphotos_30635805-stock-illustration-vintage-seamless-pattern-background.jpg");
  margin-left: 30%;
}

aside {
  width: 30vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  background: white;
}

#wrap {
  height: 100%;
}

#border {
  position: relative;
  height: calc(100% - 6rem);
  width: 100%;
  top: 4rem;
  border-top: 3px solid red;
  border-bottom: 3px solid green;
}

nav {
  background: lightsalmon;
  height: 100px;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  cursor: pointer;
}

nav.bottom {
  top: auto;
  bottom: 0;
}

nav.bottom:after {
  top: auto;
  bottom: 1rem;
}

nav:before {
  content: 'click';
}

nav:after {
  font-size: 2rem;
  color: white;
  content: 'SMALL';
  position: absolute;
  top: 1rem;
}

nav.longer {
  height: 666px;
  background: salmon;
}

nav.longer:after {
  content: 'BIG';
}

JavaScript

nav.addEventListener('click', () => {

  nav.classList.toggle('longer')

  const navInsideBorder = nav.getBoundingClientRect().height < border.getBoundingClientRect().height

  if (!navInsideBorder) {
    nav.classList.add('bottom')
  } else {
    nav.classList.remove('bottom')
  }
})



window.addEventListener('wheel', e => {
  if (e.wheelDelta > 0) {
  	// up
    nav.classList.remove('bottom')
  } else {
  	// down
    if (nav.matches('.longer')) {
    	// снизу только если нав большой
      nav.classList.add('bottom')
    }
  }
})