javascript - CSS 模拟位置：粘性

Question

我的文档结构：

<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 做到这一点？

Answer 1

我不知道纯粹的 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，我建议您注册Codecademy 的 jQuery 课程。