我需要创建一个在滚动时隐藏在其标题后面的元素（我需要一个起点）

Question

我被告知要创建一个折叠元素（它不是导航栏），就像您可以在右侧的 SBB 网站上找到的那样。 example site

通过 CSS 技巧，我设法创建了保持原位的 Title div。 CSS-Tricks 但现在我正在努力创建包含隐藏在标题后面的信息的元素，并滚动。 我是一名初级开发人员，我根本没有起点。 Screen recording of what I'm looking for

这是我到目前为止得到的，现在我需要在滚动过去时使绿色的 Box dssapear。也许有过渡？ Codepen

<div class="extra"></div>
<div id="wrapper">
  <div class="sticky">
    sticky
  </div>
  <div class='sticky sticky-subject'>sdjfnsa</div>
</div>
<div class="extra"></div>

.

    .sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #f83d23;
  width: 100px;
  height: 100px;
  top: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px #000;
  color: #fff;
  z-index: 10;
}
  .sticky-subject{
    z-index: 0;
    top: 170px;
    height: 300px;
    overflow: hidden;
    background-color: green;
  }

.extra,
#wrapper {
  width: 75%;
  margin: auto;
  background-color: #ccc;
  margin-bottom: 60px;
}
#wrapper {
  height: auto;
}
.extra {
  height: 100px;
}
body {
  font-family: georgia;
  height: 1000px;
}
h4 {
  text-align: center;
}
@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}

Answer 1

喜欢这个

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll up to show the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 2

我知道那种感觉。

这取决于您使用的前端框架。您要查找的键/标签是collapsed navbar on scroll。如果您使用的是在较小设备上崩溃的普通 Bootstrap Navbar，那么您只需添加“让导航栏崩溃”的类。通常的方法是检查导航栏的位置以及位置是否发生变化。当导航栏的位置发生变化时，添加折叠类。

此 stackoverflow answer 将帮助您折叠导航栏。