Question

我想绝对在滚动区域的顶部和底部放置一个div，这样当我在div中滚动时它们就会保持原位。

它们的滚动区域设置为position: relative;，我想要固定在顶部和底部的div绝对位于top: 0;和bottom: 0;

最初它们按预期定位，但滚动时它们会在滚动区域内滚动。

这是一个显示我的问题的代码笔： http://docs.oracle.com/javase/8/docs/api/javax/tools/JavaCompiler.html

Answer 1

我不知道如何在不使用javascript的情况下修复其他元素。如果你知道盒子的位置，你可以使用这样的固定位置：

string.StartsWith

Answer 2

将.transcript位置更改为静态。

.transcript {
    position: static;
}

将其余部分保留完整，这应该有用......

http://codepen.io/anon/pen/NGpdBY

Answer 3

不确定这是否是需要的，但 sticky 位置将在滚动区域的顶部保持一个 div (live demo)：

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

相对于滚动区域的位置

3 个答案: