javascript - div 和位置之间共享 100vh :sticky navbar

Question

我想在幻灯片和导航栏之间共享页面的初始可见区域，如下图所示，当您向下滚动文档时，该区域将粘在顶部。这就是我遇到问题的地方。

我尝试过为我的幻灯片设置 height: 90vh 和为我的导航栏设置 height: 10vh，但我希望网站是动态的并且能够适应大多数分辨率，直到您达到手机级别或至少像 Microsoft Edge 上的 200% 缩放一样，其中将使用另一个样式表。

我还尝试将它们放在同一个 div 中，为幻灯片设置 height: 90% ，为导航栏设置 height: auto 。这在动态性方面效果最好，但 position: Sticky 显然不起作用，因为它只遍历父 div 的高度。

最有效的方法是将幻灯片高度设置为 height: 90vh 并允许导航栏相应移动。它有点有效，但对我来说还不够好。

导航栏必须最初位于底部，然后粘在顶部。如果可能的话，我宁愿有一个纯粹的 CSS 解决方案，但我对 javascript 持开放态度。虽然我宁愿使用纯 javascript 而不是 jQuery，但如果它解释得很好，我就同意了。

实际问题是:如何使我的导航栏和幻灯片动态共享初始可见高度？

这是所有相关代码:

        #container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .slideshow-base {
        flex-grow: 1;
        width: 100%;
        margin: 0px;
    }
    .slideshow-container {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .Slides {
        position: absolute;
        transform: translateX(-100%);
        transition: transform 2s;
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .Slides-Images {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .navbar-base {
        font-weight: bold;
        z-index: 2;
        font-variant: small-caps;
        height: 100%;
        width: auto;
        top: 0px;
        background-color: rgba(50, 64, 147, 0.9);
        display: block;
        border-bottom: 1px solid rgb(226, 208, 0);
    }

        <div id="container"> 
        <!--Slideshow-->
        <div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
          <div class="slideshow-container">
    
            <div class="Slides">
              <img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
            </div>
    
            <div class="Slides">
              <img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
            </div>
    
            <div class="Slides">
              <img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
            </div>
    
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
    
            <div class="dot-base">
              <span class="dot" onclick="currentSlide(1)">&#5867;</span>
              <span class="dot" onclick="currentSlide(2)">&#5867;</span>
              <span class="dot" onclick="currentSlide(3)">&#5867;</span>
            </div>
          </div>
        </div>
    
        <hr />
    
        <!--Sticky Navbar-->
        <div class="navbar-base" style="width: 100%; height: auto; position: sticky;">
          <ul>
            <li class="navbar-button" style="display: inline-block;"> @Html.ActionLink("main page", "MainPage", "Home") </li>
            <li class="navbar-button" style="display: inline-block;">
              @Html.ActionLink("about", "About", "About")
              <ul class="navbar-ddmenu">
                <li class="navbar-ddcontent" style="display: inline-block;">@Html.ActionLink("academy", "Academy", "About")</li>
                <li class="navbar-ddcontent" style="display: inline-block;">@Html.ActionLink("the club", "DKClub", "About")</li>
                <li class="navbar-ddcontent" style="display: inline-block;">@Html.ActionLink("taebo", "TaeBo", "About")</li>
                <li class="navbar-ddcontent" style="display: inline-block;">@Html.ActionLink("founders and staff", "Staff", "About")</li>
              </ul>
            </li>
            <li class="navbar-button" style="float:right"> @Html.ActionLink("contacts", "Contacts")</li>
            <li class="navbar-button" style="float:right"> @Html.ActionLink("gallery", "Gallery")</li>
            <li class="navbar-button" style="float:right"> @Html.ActionLink("shop dk", "Index", "Shop")</li>
          </ul>
        </div>
     </div>

Answer 1

使用 CSS 网格

body {
  margin: 0;
}

#container {
  width: 100vw;
  background: #ccc;
  padding: 10px;
  height: 100vh;
  display: grid;
  grid-template-rows: 90vh 10vh;
  grid-gap: 10px;
}

#container>div {
  background: #999;
}

<section id="container">
  <div>Sticky</div>
  <div>NavBar</div>
</section>