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上模仿寓言的position：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課程 。