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

我知道这种感觉。

这取决于您使用的前端框架。您要查找的键/标签是YW = pd.to_datetime(df, format='%Y%W')。如果您使用的是在较小设备上崩溃的普通Bootstrap Navbar，则只需添加“让导航栏崩溃的类”。通常的方法是检查导航栏在哪里以及位置是否在更改。当导航栏的位置改变时，您将添加折叠类。

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

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

2 个答案: