Positioning navbars based on scroll position – Blancer.com Tutorials and projects

I have a page with three navbars. During scrolling navbar1 must remain fixed, navbar2 must scroll away, navbar3 must append to navbar1.

Also in main I have a sidebar where I can’t manage the height so it doesn’t come out of its container. The sidebar must remain fixed during scrolling of the page, and move upwards when I start to no longer see its container.

I’m stuck for both problems, does anyone have a solution?

I’m not using all of Bootstrap, only the Grid system and Responsive utilities downloadable from this link: https://getbootstrap.com/docs/3.4/customize/

window.onscroll = function() {
  var sidebar = document.getElementById("sidebar");
  var footer = document.getElementById("footer");
  var sidebarHeight = sidebar.offsetHeight;
  var scrollPosition = window.scrollY + window.innerHeight;
  var footerPosition = footer.offsetTop;

  // if (window.scrollY > 100) {
  //     sidebar.classList.add("active");
  // } else {
  //     sidebar.classList.remove("active");
  // }

  if (scrollPosition > footerPosition) {
    sidebar.style.position = 'absolute';
    sidebar.style.top = (footerPosition - sidebarHeight) + 'px';
    sidebar.style.width = sidebar.offsetWidth + 'px';
  } else {
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
    sidebar.style.width = '100%';
  }
};

@import url(/00.Asset/Reset-grid-Mquery/bootstrap/css/bootstrap.css);

/*===HEADER===*/

.nav1 {
  background-color: aquamarine;
  height: 150px;
  min-height: 150px;
  width: 100%;
  max-width: 100%;
  top: 0px;
  position: fixed;
}

.intro {
  background-color: orange;
  height: 150px;
  min-height: 150px;
  width: 100%;
  top: 150px;
  position: sticky;
}

.nav2 {
  background-color: violet;
  height: 150px;
  min-height: 150px;
  width: 100%;
  position: relative;
}


/*===MAIN===*/

.content {
  padding: 20px;
  height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 100px;
  height: 100vh;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-content {
  text-align: center;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 20px;
}

.sidebar.active {
  background-color: #ddd;
}

@media (max-width: 992px) {
  .sidebar {
    display: none;
  }
}


/*===FOOTER===*/

footer {
  clear: both;
  padding: 20px;
  text-align: center;
  background-color: #333;
  color: white;
  position: relative;
}

footer {
  height: 150px;
}

<header class="container-fluid">
  <row class="row-no-gutters">
    <nav class="nav1">
      <h1>Nav1</h1>
    </nav>
    <div class="intro">
      <h1>Intro</h1>
    </div>
    <nav class="nav2">
      <h1>Nav2</h1>
    </nav>
  </row>
</header>
<main>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-11 col-md-12 content">
        <h1>Contenuto Principale</h1>
        <p>Testo del contenuto principale...</p>
      </div>
      <div class="col-lg-1 col-md-12">
        <div class="sidebar" id="sidebar">
          <h2>Sidebar</h2>
          <p>Questo è il contenuto della sidebar</p>
        </div>
      </div>
    </div>
  </div>
</main>
<footer id="footer" class="text-center">
  <h2>Footer</h2>
  <p>Contenuto del footer...</p>
</footer>