相对于滚动区域的位置

Question

我想绝对地将 div 定位在滚动区域的顶部和底部，这样当我在 div.

中滚动时它们会留在原地

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

最初它们的位置符合预期，但当您滚动时它们会在滚动区域内滚动。

这是一个代码笔，显示了我的问题： http://codepen.io/JoeHastings/pen/wKJzNb

Answer 1

将 .transcript 位置更改为静态。

.transcript {
    position: static;
}

保留其余部分，这样应该可以工作...

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

Answer 2

我不知道有什么方法可以在不使用 javascript 的情况下将一个元素固定在另一个元素中。如果你知道盒子的位置，你可以像这样使用固定定位：

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

.transcript {
    position: relative;
    width: 400px;
    height: 150px;
    background: #ffcc00;
    overflow-y: scroll;

    &:before {
        content: '';
        position: fixed;
        width: 400px; height: 20px;
        margin-top: 0; margin-left: 0;

        background: -webkit-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    }

    &:after {
        content: '';
        position: fixed;
        top: 140px; left: 0;
        width: 400px; height: 20px;

        background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
    }
}

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>

相对于滚动区域的位置

Position relative to scroll area

css

scroll

position