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

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

使用CSS技巧，我成功地创建了保持不变的标题div。 但现在我正在努力创建元素，其中包含隐藏在标题后面的滚动信息。 我是一名初级开发人员，根本没有起点。

这是我到目前为止得到的结果，现在我需要在滚动过去时制作绿色框dssapear。也许是过渡？

像这样

var-prevScrollpos=window.pageYOffset；
window.onscroll=函数（）{
var currentScrollPos=window.pageYOffset；
如果（prevScrollpos>currentScrollPos）{
document.getElementById（“navbar”）.style.top=“0”；
}否则{
document.getElementById（“navbar”）.style.top=“-50px”；
}
prevScrollpos=当前ScrollPos；
}

正文{
保证金：0；
背景色：#f1f1；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#333；
位置：固定；
排名：0；
宽度：100%；
显示：块；
过渡：前0.3名；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：15px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}

此示例演示如何在用户开始滚动页面时隐藏导航栏

向下滚动此帧以查看效果

向上滚动以显示导航栏

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

我知道这种感觉

这取决于您使用的前端框架。您要查找的键/标签是滚动条上的一个折叠导航栏。如果您使用的是在小型设备上崩溃的正常引导，那么您只需添加“允许导航栏崩溃”类。通常的方法是检查导航栏的位置以及位置是否发生变化。当导航栏的位置发生更改时，将添加正在折叠的类

---

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

您正在寻找手风琴式控件吗？如果是，请看一下这些例子@karthickj25，部分区别在于它需要粘性，需要通过滚动打开/关闭为什么需要想法？你试过什么？你的方法是什么。没有code@window.document使用Ideas这个词是错误的做法。但我的问题源于我不知道该用什么关键词。我只能找到正在折叠的导航栏，而不能找到折叠到其父元素中的元素。因为我不知道从哪里开始寻找，所以我一直在寻求一些建议/想法。顶部需要保持固定，底部需要“过渡”，就像本例中右侧的框一样。您可以右键单击网站，然后选择“检查并查看代码”和“JS代码”

<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;
  }
}