我想将一个 div 绝对定位在滚动区域的顶部和底部,这样当我在 div 内滚动时它们就留在原地。
它们的滚动区域有 position: relative;
设置,我想固定到顶部和底部的 div 绝对定位在 top: 0;
和 底部:0;
最初它们按预期定位,但当您滚动时它们会在滚动区域内滚动。
这是显示我的问题的代码笔: http://codepen.io/JoeHastings/pen/wKJzNb
最佳答案
我不知道有什么方法可以在不使用 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%);
}
}
关于css - 相对于滚动区域的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32911653/