时间戳

首页 > 解决方案 > 如何在滚动时将 div 元素粘贴到其上方的 div 上？

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

问题描述

我有一个固定的顶部标题并在滚动时缩小。下面我有一个 div 元素（侧面横幅），它必须在视图窗格中垂直居中，并且在我向下滚动时必须贴在顶部标题上。我不能让这个 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";

  }
}

标签： javascriptcssscroll

解决方案

你的粘性想法很好用。棘手的部分是知道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>

推荐阅读