[英]A scrollable div under a div
Guys, I have the following HTML.伙计们,我有以下 HTML。 Is it possible for the
#underdiv
to scroll under the #topdiv
? #topdiv
是否可以在#underdiv
下滚动? I want to achieve the effect of having a list of items and to be able to scroll it up and down while keeping the #topdiv
always visible on top of it.我想实现具有项目列表的效果,并能够上下滚动它,同时保持
#topdiv
始终在其顶部可见。 Can it be done just with the CSS or do I have to add some Javascript magic?可以仅使用 CSS 来完成,还是我必须添加一些 Javascript 魔法? I also have JQuery and JQueryMobile (as this is meant for an iOS device) included in the file but I kept them out to make the HTML look simpler.
我还包含在文件中的 JQuery 和 JQueryMobile(因为这适用于 iOS 设备),但我保留它们以使 HTML 看起来更简单。
Thanks in advance for helping me out!提前感谢您帮助我!
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
#underdiv {
background-color: red;
position: relative;
top: -40px;
width: 80%;
margin: 0 auto;
}
#topdiv {
background-color: yellow;
}
</style>
</head>
<body>
<div id="topdiv">
<h1>Random title</h1>
<p>This is a random paragraph bla bla bla bla yada yada yada</p>
</div>
<div id="underdiv">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</div>
</body>
</html>
it's possible, though the scrollbar disappears under too;这是可能的,尽管滚动条也消失了;
ul {
margin: 0;
padding: 40px 0 0 30px;
}
#underdiv {
background-color: red;
width: 80%;
margin: 0 auto;
height: 200px;
overflow: auto;
margin-top: -40px;
}
#topdiv {
background-color: yellow;
padding: 1px; /* to stop margins collapsing */
position: relative;
}
remove position:relative
from underiv and add position:fixed
to topdiv.从 underiv 中删除
position:relative
并将position:fixed
添加到 topdiv。 Look at the resut here看这里的结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.