Javascript 如何使一个元素的行为位置：固定在另一个滚动元素中？
我正在创建一个JavaScript驱动的时间表概览屏幕。它将一天中的时间显示为左下角的行，将日期显示为顶部的列 这里有一个例子： 基本上，我希望将日期放在时间表div的顶部，并在元素滚动时将其固定在那里Javascript 如何使一个元素的行为位置：固定在另一个滚动元素中？,javascript,css,Javascript,Css,我正在创建一个JavaScript驱动的时间表概览屏幕。它将一天中的时间显示为左下角的行，将日期显示为顶部的列 这里有一个例子： 基本上，我希望将日期放在时间表div的顶部，并在元素滚动时将其固定在那里 我意识到我可以在div之前放置几天。但是，由于布局是为了保持流畅，我可能会遇到标题与下方网格对齐的问题，因为不同浏览器的滚动条宽度不同（以及用户偏好）.它必须在div#chedule之外/之前 在另一个中包装div#时间表。给出外部的位置：相对和内部（div#timeline）的溢出：滚动 下面
我意识到我可以在div之前放置几天。但是，由于布局是为了保持流畅，我可能会遇到标题与下方网格对齐的问题，因为不同浏览器的滚动条宽度不同（以及用户偏好）.它必须在
div#chedulediv#时间表位置：相对和内部
（div#timeline
）的溢出：滚动
下面是一个有效的例子：（有点啰嗦）
例子
#主要{
填充顶部：20px；
位置：相对位置；
顶部：0px；
左：0px；
}
#主屏幕。可滚动{
高度：50px；
溢出y：滚动；
}
#主氢{
位置：绝对位置；
顶部：0px；
左：0px；
背景：红色；
宽度：100%；
z指数：-1；
}
这就是一个例子
此文本不应移动。
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是自由之门。我的朋友们，我的朋友们，我的朋友们。整件佩伦特斯式的普尔文纳多洛，是拉齐尼亚式的精英。这是一个自由的节杖。但在中间，我们坐着的是三叉戟，前庭舌苔，十字节杖。这是一种临时性的、有尊严的告别方式，它是一种不需要任何食物的食物。拉齐尼亚万岁。莫里斯·奎斯调味品维利特。莫比·莫里斯·尼索，他是埃古斯塔斯家族的一员，是一名神职人员。虎皮鹦鹉，元素门，箭矢。这是一只猫。Etiam Vivate viverra sem。Nam调味品马萨·维塔·萨皮斯·维韦拉。我是一个非法的索达尔侵权人。Mauris ultrices rhoncus lorem vel
这是一个很好的例子，它是一个很好的例子。爱是一种折磨，爱是一种折磨。维韦拉·奥奇·布朗迪特名言。伊莱芬德女神，高贵的生命之角，屠夫之角，利奥之角。Sed nisl quam，欧盟注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册商标注册。毛里斯·内克·鲁特姆·迪亚姆。我坐在阿梅特-奥古斯特大街上，欧盟的奥基岛。这是欧洲最大的旅游胜地。在温和的发酵液中，中间无明渠是一种普通的明渠。酒后驾车坐在自由号上。阿利奎姆·波特提托·努拉·乌尔里塞姆·达皮布斯·弗利利亚
福斯·福西布斯·埃吉斯塔斯·米维尔·莫利斯。阿库姆桑马萨的多尼克。在码头上，酒后驾车是不可抗拒的。我是普尔文纳的国王。Suspendisse ut nunc enim。暂时停止。生命前庭。这是一个空白和前期的分子标记。但是，我的天哪。虎皮兰。杜伊斯·阿利奎特·拉齐尼亚·图尔皮斯是一只小猎犬。埃尼安·塞德·埃利特·乌纳，萨吉蒂·帕特·马萨。这是一个非常好的例子。请记住你的生活。整数eget eleifend metus。积垢，积垢，积垢。在hac habitasse Plateum，一句名言。这是一个非常重要的问题
爱神之门，奥古斯之门。在lobortis，nulla eleifend Adipising fringilla，ligula arcu tincidunt nisi，eget tincidunt Elite nunc quis felis。Phasellus调味品，不含肉馅。pulvinar的Morbi ornare viverra nulla。整型前庭位于前庭两侧。交通工具上的小径。两人都是温和的自由主义者。多内克·奥迪奥·托托，佩伦特斯在坦普斯，福西布斯在奥古斯。在进化的元素中，欧氏软体动物（eumollis orci iaculis）是一种动物。Nam ornare sagittis egestas。他坐在那里，坐在那里。不可否认的封建制度，不可否认的权威。阿利奎姆·埃拉特·帕特。南维内那提斯侵权公司是一家专门为欧盟设计的公司。菱鲆是一种特殊的植物，但它是一种特殊的调味品。我是乌拉姆科珀的智者。purus康瓦利斯万岁。圣矢状体悬吊术。在扫描电镜中，矢状体是半圆形的，矢状体是狮子座的。无便利
Donec Adipising、nisl vitae ornare ultricies、justo elit mattis est、ac vehicula nibh sem sed arcu。乌尔里西斯之心的虚空，与兽人之心的时间一致。Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi fringilla sodales只是欧盟元素。Aenean eget velit sem，quis pretium sem。卢库斯·利奥·奎斯是朗库斯·康格。本品是一种高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品、高级调味品。在porttitor bibendum arcu，ac sodales精英聚集在一起。无便利。自由的turpis，威尼斯人坐在amet tincidunt和laoreet vel libero。请注意饮食。酒水和调味品。他坐在地上，坐在地上。这是一个伟大的事业，是一个神圣的事业，是一个伟大的事业。这是一个错误
这已经很接近了，至少现在它还处于领先地位。剩下的唯一问题是，当我把div拉过时，它部分地覆盖了滚动div的滚动条，就像这样：是的，我试过了-不幸的是，时间表的网格背景在你开始滚动时就遮住了标题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style>
#main {
padding-top:20px;
position:relative;
top:0px;
left:0px;
}
#main .scrollable {
height:50px;
overflow-y:scroll;
}
#main h2 {
position:absolute;
top:0px;
left:0px;
background:red;
width:100%;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is the example</h1>
<div id="main">
<h2>This text shouldn't move.</h2>
<!-- this is where you want div#timetable -->
<div class="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta mi vel libero bibendum dapibus. Fusce enim lacus, egestas id malesuada et, mollis eu dolor. Integer pellentesque pulvinar dolor, quis lacinia elit tempus vel. Integer volutpat nisl nec nisi egestas a scelerisque libero convallis. Ut interdum, tellus sit amet cursus tristique, metus ligula vestibulum enim, tempus scelerisque dui urna id risus. Duis tempor, sem vel dignissim adipiscing, tellus erat sodales justo, a sodales nulla nibh ac arcu. Vivamus ut lacinia erat. Mauris quis condimentum velit. Morbi mauris nisl, bibendum a tincidunt egestas, convallis id arcu. Fusce purus orci, porttitor vel elementum eu, sagittis quis lacus. Praesent sed commodo turpis. Etiam vitae viverra sem. Nam condimentum massa vitae sapien adipiscing viverra. Proin feugiat mi a quam molestie sed sodales tortor vulputate. Mauris ultrices rhoncus lorem vel imperdiet.</p>
<p>Fusce pretium, massa ac fermentum laoreet, erat justo dignissim justo, et auctor massa tellus quis eros. Aenean ut mauris eget tortor porta egestas ut sed eros. Duis dignissim viverra orci dictum blandit. Quisque eleifend, arcu vitae tristique dignissim, tortor turpis cursus nunc, eget accumsan velit tortor vel leo. Sed nisl quam, consectetur vel rhoncus eu, rhoncus non tortor. Mauris nec rutrum diam. Sed sit amet augue est, eu dapibus orci. Nulla vel turpis magna, eu euismod est. Nulla interdum urna a lectus commodo in blandit erat fermentum. Duis sit amet commodo libero. Aliquam porttitor nulla ultrices sem dapibus fringilla.</p>
<p>Fusce faucibus egestas mi vel mollis. Donec at accumsan massa. Nullam vitae massa a dui facilisis dictum nec at quam. Quisque pharetra malesuada est id pulvinar. Suspendisse ut nunc enim. Donec tristique consectetur tempor. Vestibulum vitae imperdiet massa. Ut a lacus et ante molestie adipiscing. Ut cursus dapibus blandit. Cras ac varius orci. Duis aliquet lacinia turpis a tincidunt. Aenean sed elit urna, sagittis volutpat massa. Quisque iaculis neque sit amet ipsum aliquam non auctor lacus gravida. Donec vitae leo eget tellus lobortis dictum ac eget erat. Integer eget eleifend metus. Fusce accumsan cursus accumsan. In hac habitasse platea dictumst. Nullam egestas odio nec quam ornare vitae ultricies mi consectetur.</p>
<p>Duis ante eros, aliquam a euismod quis, porta ac augue. Sed lobortis, nulla eleifend adipiscing fringilla, ligula arcu tincidunt nisi, eget tincidunt elit nunc quis felis. Phasellus condimentum adipiscing risus non pellentesque. Morbi ornare viverra nulla in pulvinar. Integer vestibulum dui eget neque euismod pretium. Nullam dapibus cursus vehicula. Duis blandit neque sed diam porttitor a feugiat libero suscipit. Donec odio tortor, pellentesque at tempus ut, faucibus ut augue. In elementum volutpat ante, eu mollis orci iaculis sit amet. Nam ornare sagittis egestas. Fusce sit amet consequat dolor. Nullam feugiat arcu enim, rhoncus dictum sem. Aliquam erat volutpat. Nam venenatis tortor eu nisl semper ullamcorper eu eget lectus. Phasellus rhoncus est sit amet est ultricies ut ultricies tellus condimentum. Fusce posuere mi sed sapien molestie ullamcorper. Vivamus ac convallis purus. Suspendisse eleifend orci nec nibh sagittis consectetur. In sem elit, sagittis semper volutpat et, suscipit facilisis leo. Nulla facilisi.</p>
<p>Donec adipiscing, nisl vitae ornare ultricies, justo elit mattis est, ac vehicula nibh sem sed arcu. Nulla in purus vel risus ultricies consequat tempus a orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla sodales justo eu elementum. Aenean eget velit sem, quis pretium sem. Quisque luctus leo quis est rhoncus congue. Praesent tincidunt, elit eget imperdiet condimentum, justo elit accumsan ante, eget vestibulum turpis mi vitae diam. In porttitor bibendum arcu, ac sodales elit congue sed. Nulla facilisi. Ut turpis libero, venenatis sit amet tincidunt et, laoreet vel libero. Praesent eleifend porttitor imperdiet. Quisque et condimentum nisl. Etiam rhoncus suscipit ante, sit amet imperdiet tellus aliquet vel. Etiam ante neque, lobortis vitae consectetur in, cursus quis velit. Ut quis justo eu nisl ultricies vulputate nec ac lorem. </p>
</div>
</div>
</body>
</html>