在div和position之间共享100vh：sticky navbar

Question

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

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

我也尝试将它们放在同一个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

你可以将这两个元素包装在一个包装器中（并且可选地给它一个高度）并使用flexbox使它们共享空间。

在下面的示例中，幻灯片显示将始终覆盖包装纸高度的90％，导航将覆盖其中的10％。

＆＃13;

＆＃13;

.slideshow,
.nav {
  border: 2px solid #000
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh
}
   
.nav {
  /* An arbitrary value to start with */
  flex-grow: 1;
}

.slideshow {
  /* Grow this element 9 times more than the other element. */
  flex-grow: 9;
}

＆＃13;

<div class="wrapper">
  <div class="slideshow">
    Slideshow content
  </div>

  <nav class="nav">
    Navigation content
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用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>

Answer 3

好的，我会为你的初始视图使用flexbox方法，然后在滚动上添加一个类的js：

＆＃13;

＆＃13;

window.onscroll = function() {
  var nav = document.getElementById('nav');
  var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
  
  if (scrollTop > 100) {               // not sure how much you want it to scroll before it is made sticky
    nav.classList.add("fixed");
  } else {
    nav.classList.remove("fixed");
  }
}

＆＃13;

body {
  margin:0;
  
  height:200vh; /* just so there is some scrolling */
}
.container {
  height:100vh;  
  display:flex;
  flex-direction:column;
}

.slideshow-base {
  flex-grow:1;    /* this will make shadow base take the rest of the available height to start with */
}

.fixed {
  position:fixed; 
  top:0;
  left:0;
  right:0;
}

＆＃13;

<div class="container">
  <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 id="nav" class="navbar-base">
    <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>

＆＃13;

＆＃13;

＆＃13;