javascript - 如何在滚动时将 div 元素粘贴到其上方的 div 上？

Question

我有一个固定的顶部标题，并在滚动时缩小。在其下方，我有一个 div 元素(侧横幅)，它必须在 View Pane 中垂直居中，并且在我向下滚动时必须坚持顶部标题。我无法让这个 div 元素粘在顶部标题上。

我试过使用 CSS position: sticky 但它不起作用。问题是侧横幅在滚动时越过顶部标题。我还尝试添加一个粘性类，它显示了一些 javascript，但我一定是做错了什么，因为它不起作用。请帮忙!

HTML:

<header id="topBanner">Top Banner</header>

<div class="content">
  <div class="sideBanner" id="sideBanner">
  </div>
</div>

CSS:

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

#topBanner {

  background-color: #e9ab18;
  padding: 50px 10px;
  color: #000;
  text-align: center;
  font-size: 90px; 
  font-weight: bold;
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.2s;
}

.content {
  position: relative;
  height: 1000px;

 }

.sideBanner {
  position: absolute;
  background: #f5d997;
  width: 150px;
  height: 400px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); 
  right: 10px;
}

  .sticky {
  position: fixed;
  top: 0;
}

JavaScript:

// FUNCTION TO MAKE TOP HEADER SHRINK ON SCROLL:

window.onscroll = function() {scrollFunction()};


function scrollFunction() {
if (document.body.scrollTop > 50 || 
   document.documentElement.scrollTop > 50) {
    document.getElementById("topBanner").style.fontSize = "30px";

  } else {
    document.getElementById("topBanner").style.fontSize = "90px";

  }
}

Answer 1

您的 HTML 中没有粘性类。

您已经在 CSS 中创建了类，但并未在 HTML 中应用此类。