我正在创建一个 JavaScript 驱动的时间表概览屏幕。它将一天中的时间显示为从左下方的行，并以横跨顶部的列显示日期。
这里有一个例子:http://www.cap2.co.uk/dev/timetable.htm
基本上，我想将日期放在时间表 div 的顶部，并在元素滚动时将它们固定在那里。
我意识到我可以将天数放在<em> div 之前。但是，由于布局旨在保持流畅，因此由于浏览器的滚动条宽度不同(以及用户偏好)，我可能会遇到标题与下方网格对齐的问题。
最佳答案
它必须在div#timetable 之外/之前.
换行div#timetable在另一个<div> .给外<div> position:relative;和内部 <div> ( div#timetable ) overflow:scroll; .
这是一个工作示例:(有点长篇大论)
<!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>
关于javascript - 如何使元素行为位置 :fixed within another scrolling element?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3548738/