Question

我有一个固定的顶部标头，并在滚动时缩小。在此下方，我有一个div元素（侧面横幅），该元素必须在视图窗格中垂直居中，并且在向下滚动时必须粘贴到顶部标题。我不能让这个div元素坚持到顶部标题。

我尝试使用CSS位置：粘性，但是不起作用。问题是侧面横幅在滚动条的顶部标题上方运行。我也尝试过添加一个显示一些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上应用该类。

Answer 2

您的粘性想法很好用。棘手的部分是知道要赋予它什么top值。

Chrome的反复试验导致我将其设置为334px，但最好动态地计算此值。您可以从topBanner.offsetHeight开始，然后添加其他值（例如，填充或边距可能未包含在计算值中）。

在以下代码段中，我还给了topBanner z-index: 1（与您最初发布的内容几乎相同），以防止sideBanner在快速滚动期间短暂地出现在其前面。

（注意：此片段的行为在SO的全屏视图中更加清楚。）

const topBanner = document.getElementById("topBanner");
const sideBanner = document.getElementById("sideBanner");

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop > 50) {
    topBanner.style.fontSize = "30px";
    sideBanner.classList.add("sticky");
  } else {
    topBanner.style.fontSize = "90px";
    sideBanner.classList.remove("sticky");
  }
}

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;
  z-index: 1; /* Positions this element in front of others */
}

.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: 334px; /* Hard-coded guess for this value, dynamic would be better */
}

<header id="topBanner">Top Banner</header>
<div class="content">
  <div class="sideBanner" id="sideBanner">
    s <br />
    i <br />
    d <br />
    e <br />
      <br />
    b <br />
    a <br />
    n <br />
    n <br />
    e <br />
    r <br />
  </div>
</div>

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

2 个答案: