Question

我正在创建一个JavaScript驱动的时间表概述屏幕。它显示了当前行在左下方行的时间，并且具有作为列穿过顶部的日期。

这里有一个例子：http://www.cap2.co.uk/dev/timetable.htm

基本上，我想把时间跨越时间表div的顶部，并在元素滚动时将它们固定在那里。

我意识到我可以把之前的日子放在 div之前。但是，因为布局是流动的，所以由于浏览器的滚动条宽度（以及用户偏好）不同，我可能会遇到与下面网格排列的标题问题。

Answer 1

它必须在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>

如何使元素表现为位置：在另一个滚动元素中固定？

1 个答案: