Javascript CSS模拟位置：粘性

我的文档结构：

<div id="section">
      <div class="subSection">
         <h2></h2>
      </div>
      <div class="subSection">
          <div></div>
      </div>
      <div id="controlBox">
          <h2></h2>
          <form></form>
      </div>
</div>

---

我需要模仿传说中的位置：在#controlBox上使用sticky（我无法使用它，或者找不到太多文档）。使用JS或CSS有什么方法可以做到这一点吗？

我不知道有什么纯粹的CSS解决方案，但jQuery可能能够解决这个问题

伪代码：

// Calculate height of screen
// Choose what percentage of that both subSections take up
// Remaining percentage is the height of the controlBox

所以在jQuery中它可能看起来有点像这样：

// this returns the value of the browser's window's height in pixels
$height = $(window).height();

// this is considering that both subsections are next to each other (they take up 80% of the height)
$subsectionHeight = $height * 0.8;

或者，如果各个子段相互重叠，且它们占总高度的80%：

$subsectionHeight = $height * 0.4;

// controlBox takes up 20% of height of window
$controlboxHeight = $height * 0.2; 

// then you can assign the heights to each element
$('.subSection').css("height", "$subsectionHeight");
$('#controlBox').css("height", "$controlboxHeight");

我知道您更喜欢纯CSS，但我发现jQuery有时非常有用

---

如果您不了解jQuery或者在理解jQuery方面有困难，我建议您注册

那么它应该是什么样子呢？你的问题有矛盾，矛盾是什么？我将重写-我需要一个框（#controlBox），该框与section div中的“position:fixed”（例如与页面一起滚动）具有相同的行为，但也需要定位在两个子部分下方

position:fixed

表示它不与页面一起滚动。当你滚动时，它保持在屏幕上的位置。好的，做了一些研究。尝试模拟位置：粘性。更新问题以真正反映这一点。更有意义：）但是：

controlBox

是最后一个元素<代码>粘性只有在其后面有内容时才有意义。无论如何：纯CSS目前只适用于Safari，并且它的供应商前缀为：

位置：-webkit sticky

。如果您希望控制框始终位于窗口底部，只需将其边距底部设置为0即可。请理解，具有position:fixed的元素是从DOM流中取出的，因此它不知道其他元素在哪里。为了解决重叠问题，我认为您必须使用jQuery并处理一些数字。我涵盖了所有内容吗？我避免使用jQuery，因为它增加了waaaay的占用空间，而且我特别需要这个站点是轻量级的。我可以很容易地将您的解决方案转换为普通JS，除非其他人提出更好的解决方案，否则这看起来就是解决问题的方法