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上模仿传说中的位置：粘性（我无法开始工作，或者真的找到很多文档）。有没有办法用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's jQuery course。

CSS模拟位置：粘性

1 个答案: