固定页面，内容滚动在标题后面。

I am working on a website. I have most of the page fixed, except I want the table in the middle to scroll with the main scrollbar. Then I have an image in the background that I want to partially show through. I have it mostly working. The only part I cannot figure out is how to get the table content to go behind or even stop when it gets to the header. I will include a fiddle so you can see what I am talking about. HTML:

我正在做一个网站。我已经修复了大部分页面，但是我希望中间的表与主滚动条一起滚动。然后在背景中有一个图像，我想要部分显示出来。我大部分时间都在工作。我唯一搞不懂的是，如何让表内容滞后，甚至在它到达页眉时停止。我将包括一个小提琴，这样你们就能看到我在说什么。HTML:

<body>
<div id="background"></div>
<div id="tableBackground"></div>
    <div id="fixedHeader">
        <h1>fixed header</h1>
        <h2>Subheading</h2>
    </div>
    <div id="tableContainer">
        <table class="stocks compact display cell-border">
            <tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
            <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
            <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
            <tr><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
            <tr><td>row 5 cell 1</td><td>row 5 cell 2</td></tr>
            <tr><td>row 6 cell 1</td><td>row 6 cell 2</td></tr>
            <tr><td>row 7 cell 1</td><td>row 7 cell 2</td></tr>
            <tr><td>row 8 cell 1</td><td>row 8 cell 2</td></tr>
            <tr><td>row 9 cell 1</td><td>row 9 cell 2</td></tr>
            <tr><td>row 10 cell 1</td><td>row 10 cell 2</td></tr>
            <tr><td>row 11 cell 1</td><td>row 11 cell 2</td></tr>
            <tr><td>row 12 cell 1</td><td>row 12 cell 2</td></tr>
            <tr><td>row 13 cell 1</td><td>row 13 cell 2</td></tr>
            <tr><td>row 14 cell 1</td><td>row 14 cell 2</td></tr>
            <tr><td>row 15 cell 1</td><td>row 15 cell 2</td></tr>
            <tr><td>row 16 cell 1</td><td>row 16 cell 2</td></tr>
            <tr><td>row 17 cell 1</td><td>row 17 cell 2</td></tr>
            <tr><td>row 18 cell 1</td><td>row 18 cell 2</td></tr>
            <tr><td>row 19 cell 1</td><td>row 19 cell 2</td></tr>
            <tr><td>row 20 cell 1</td><td>row 20 cell 2</td></tr>
            <tr><td>row 21 cell 1</td><td>row 21 cell 2</td></tr>
            <tr><td>row 22 cell 1</td><td>row 22 cell 2</td></tr>
            <tr><td>row 23 cell 1</td><td>row 23 cell 2</td></tr>
            <tr><td>row 24 cell 1</td><td>row 24 cell 2</td></tr>
            <tr><td>row 25 cell 1</td><td>row 25 cell 2</td></tr>
            <tr><td>row 26 cell 1</td><td>row 26 cell 2</td></tr>
            <tr><td>row 27 cell 1</td><td>row 27 cell 2</td></tr>
            <tr><td>row 28 cell 1</td><td>row 28 cell 2</td></tr>
            <tr><td>row 29 cell 1</td><td>row 29 cell 2</td></tr>
            <tr><td>row 30 cell 1</td><td>row 30 cell 2</td></tr>
            <tr><td>row 31 cell 1</td><td>row 31 cell 2</td></tr>
            <tr><td>row 32 cell 1</td><td>row 32 cell 2</td></tr>
            <tr><td>row 33 cell 1</td><td>row 33 cell 2</td></tr>
            <tr><td>row 34 cell 1</td><td>row 34 cell 2</td></tr>
            <tr><td>row 35 cell 1</td><td>row 35 cell 2</td></tr>
            <tr><td>row 36 cell 1</td><td>row 36 cell 2</td></tr>
            <tr><td>row 37 cell 1</td><td>row 37 cell 2</td></tr>
            <tr><td>row 38 cell 1</td><td>row 38 cell 2</td></tr>
            <tr><td>row 39 cell 1</td><td>row 39 cell 2</td></tr>
            <tr><td>row 40 cell 1</td><td>row 40 cell 2</td></tr>
            <tr><td>row 41 cell 1</td><td>row 41 cell 2</td></tr>
            <tr><td>row 42 cell 1</td><td>row 42 cell 2</td></tr>
            <tr><td>row 43 cell 1</td><td>row 43 cell 2</td></tr>
            <tr><td>row 44 cell 1</td><td>row 44 cell 2</td></tr>
            <tr><td>row 45 cell 1</td><td>row 45 cell 2</td></tr>
            <tr><td>row 46 cell 1</td><td>row 46 cell 2</td></tr>
        </table>
    </div>
</body>

CSS:

    html { 
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
    position: fixed;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
}

#fixedHeader {
    position: fixed;
    left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}

#tableContainer {
    position: relative;
    top: 80px;
    width: 1200px;
    margin: 0 auto;
}

.stocks {
    margin: 20px auto;
}

h1 {
    font-size: 1.4em;
    text-align: center;
}

h2 {
    font-size: 1.2em;
    text-align: center;
}

And here is my fiddle so you can see what exactly I am describing. You can see the table content shows behind the header when it scrolls up. I want it to hide when it gets to the header.

这是我的小提琴，你们可以看到我所描述的。当页眉向上滚动时，可以看到页眉后面显示的表内容。我想让它在到达页眉时隐藏起来。

4 个解决方案

#1

CSS:

CSS:

html,
body {
    margin: 0;
    padding: 0;
}
#background {
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}
#tableBackground {
    position: fixed;
    top: 30px;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0 auto;
}
#fixedHeader {
    position: fixed;
    overflow: hidden;
    left: 50%;
    top: 30px;
    margin-left: -600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}
#tableContainer {
    height: 80%;
    overflow: auto;
    position: fixed;
    top: 120px;
    width: 100%;
    margin: 0 auto;
}
.stocks {
    margin: 20px auto;
}
h1 {
    font-size: 1.4em;
    text-align: center;
}
h2 {
    font-size: 1.2em;
    text-align: center;
}

Here is working fiddle.

这是小提琴。

html,
body {
  margin: 0;
  padding: 0;
}
#background {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  top: 30px;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0 auto;
}
#fixedHeader {
  position: fixed;
  overflow: hidden;
  left: 50%;
  top: 30px;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  height: 80%;
  overflow: auto;
  position: fixed;
  top: 120px;
  width: 100%;
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}

<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div id="tableContainer">
    <table class="stocks compact display cell-border">
      <tr>
        <td>row 1 cell 1</td>
        <td>row 1 cell 2</td>
      </tr>
      <tr>
        <td>row 2 cell 1</td>
        <td>row 2 cell 2</td>
      </tr>
      <tr>
        <td>row 3 cell 1</td>
        <td>row 3 cell 2</td>
      </tr>
      <tr>
        <td>row 4 cell 1</td>
        <td>row 4 cell 2</td>
      </tr>
      <tr>
        <td>row 5 cell 1</td>
        <td>row 5 cell 2</td>
      </tr>
      <tr>
        <td>row 6 cell 1</td>
        <td>row 6 cell 2</td>
      </tr>
      <tr>
        <td>row 7 cell 1</td>
        <td>row 7 cell 2</td>
      </tr>
      <tr>
        <td>row 8 cell 1</td>
        <td>row 8 cell 2</td>
      </tr>
      <tr>
        <td>row 9 cell 1</td>
        <td>row 9 cell 2</td>
      </tr>
      <tr>
        <td>row 10 cell 1</td>
        <td>row 10 cell 2</td>
      </tr>
      <tr>
        <td>row 11 cell 1</td>
        <td>row 11 cell 2</td>
      </tr>
      <tr>
        <td>row 12 cell 1</td>
        <td>row 12 cell 2</td>
      </tr>
      <tr>
        <td>row 13 cell 1</td>
        <td>row 13 cell 2</td>
      </tr>
      <tr>
        <td>row 14 cell 1</td>
        <td>row 14 cell 2</td>
      </tr>
      <tr>
        <td>row 15 cell 1</td>
        <td>row 15 cell 2</td>
      </tr>
      <tr>
        <td>row 16 cell 1</td>
        <td>row 16 cell 2</td>
      </tr>
      <tr>
        <td>row 17 cell 1</td>
        <td>row 17 cell 2</td>
      </tr>
      <tr>
        <td>row 18 cell 1</td>
        <td>row 18 cell 2</td>
      </tr>
      <tr>
        <td>row 19 cell 1</td>
        <td>row 19 cell 2</td>
      </tr>
      <tr>
        <td>row 20 cell 1</td>
        <td>row 20 cell 2</td>
      </tr>
      <tr>
        <td>row 21 cell 1</td>
        <td>row 21 cell 2</td>
      </tr>
      <tr>
        <td>row 22 cell 1</td>
        <td>row 22 cell 2</td>
      </tr>
      <tr>
        <td>row 23 cell 1</td>
        <td>row 23 cell 2</td>
      </tr>
      <tr>
        <td>row 24 cell 1</td>
        <td>row 24 cell 2</td>
      </tr>
      <tr>
        <td>row 25 cell 1</td>
        <td>row 25 cell 2</td>
      </tr>
      <tr>
        <td>row 26 cell 1</td>
        <td>row 26 cell 2</td>
      </tr>
      <tr>
        <td>row 27 cell 1</td>
        <td>row 27 cell 2</td>
      </tr>
      <tr>
        <td>row 28 cell 1</td>
        <td>row 28 cell 2</td>
      </tr>
      <tr>
        <td>row 29 cell 1</td>
        <td>row 29 cell 2</td>
      </tr>
      <tr>
        <td>row 30 cell 1</td>
        <td>row 30 cell 2</td>
      </tr>
      <tr>
        <td>row 31 cell 1</td>
        <td>row 31 cell 2</td>
      </tr>
      <tr>
        <td>row 32 cell 1</td>
        <td>row 32 cell 2</td>
      </tr>
      <tr>
        <td>row 33 cell 1</td>
        <td>row 33 cell 2</td>
      </tr>
      <tr>
        <td>row 34 cell 1</td>
        <td>row 34 cell 2</td>
      </tr>
      <tr>
        <td>row 35 cell 1</td>
        <td>row 35 cell 2</td>
      </tr>
      <tr>
        <td>row 36 cell 1</td>
        <td>row 36 cell 2</td>
      </tr>
      <tr>
        <td>row 37 cell 1</td>
        <td>row 37 cell 2</td>
      </tr>
      <tr>
        <td>row 38 cell 1</td>
        <td>row 38 cell 2</td>
      </tr>
      <tr>
        <td>row 39 cell 1</td>
        <td>row 39 cell 2</td>
      </tr>
      <tr>
        <td>row 40 cell 1</td>
        <td>row 40 cell 2</td>
      </tr>
      <tr>
        <td>row 41 cell 1</td>
        <td>row 41 cell 2</td>
      </tr>
      <tr>
        <td>row 42 cell 1</td>
        <td>row 42 cell 2</td>
      </tr>
      <tr>
        <td>row 43 cell 1</td>
        <td>row 43 cell 2</td>
      </tr>
      <tr>
        <td>row 44 cell 1</td>
        <td>row 44 cell 2</td>
      </tr>
      <tr>
        <td>row 45 cell 1</td>
        <td>row 45 cell 2</td>
      </tr>
      <tr>
        <td>row 46 cell 1</td>
        <td>row 46 cell 2</td>
      </tr>
    </table>
  </div>
</body>

#2

If you absolutely want the scroll for entire page and not just for the header as in the question -

如果你绝对想要整个页面的滚动，而不仅仅是标题，在问题中-

you can use the new clip-path property with a little bit of script for modifying the clipping value when user scrolls, as shown below.

您可以使用带有一些脚本的新的剪切路径属性来修改用户滚动时的剪切值，如下所示。

$(window).on('scroll', function() {
  var scrolltop = $(this).scrollTop();
  $('.clip-me').css({
    '-webkit-clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip': 'rect(' + (scrolltop) + 'px, auto, auto, auto)'
  });
});

html {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
}
#fixedHeader {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  position: absolute; /*-The fallback clip proerty requires absolute of fixed-*/
  top: 80px;
  width: 100%; /*---------- Modified for demo purpose ------------*/
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<div id="tableBackground"></div>
<div id="fixedHeader">
  <h1>fixed header</h1>
  <h2>Subheading</h2>
</div>
<div id="tableContainer" class="clip-me">
  <table class="stocks compact display cell-border">
    <tr>
      <td>row 1 cell 1</td>
      <td>row 1 cell 2</td>
    </tr>
    <tr>
      <td>row 2 cell 1</td>
      <td>row 2 cell 2</td>
    </tr>
    <tr>
      <td>row 3 cell 1</td>
      <td>row 3 cell 2</td>
    </tr>
    <tr>
      <td>row 4 cell 1</td>
      <td>row 4 cell 2</td>
    </tr>
    <tr>
      <td>row 5 cell 1</td>
      <td>row 5 cell 2</td>
    </tr>
    <tr>
      <td>row 6 cell 1</td>
      <td>row 6 cell 2</td>
    </tr>
    <tr>
      <td>row 7 cell 1</td>
      <td>row 7 cell 2</td>
    </tr>
    <tr>
      <td>row 8 cell 1</td>
      <td>row 8 cell 2</td>
    </tr>
    <tr>
      <td>row 9 cell 1</td>
      <td>row 9 cell 2</td>
    </tr>
    <tr>
      <td>row 10 cell 1</td>
      <td>row 10 cell 2</td>
    </tr>
    <tr>
      <td>row 11 cell 1</td>
      <td>row 11 cell 2</td>
    </tr>
    <tr>
      <td>row 12 cell 1</td>
      <td>row 12 cell 2</td>
    </tr>
    <tr>
      <td>row 13 cell 1</td>
      <td>row 13 cell 2</td>
    </tr>
    <tr>
      <td>row 14 cell 1</td>
      <td>row 14 cell 2</td>
    </tr>
    <tr>
      <td>row 15 cell 1</td>
      <td>row 15 cell 2</td>
    </tr>
    <tr>
      <td>row 16 cell 1</td>
      <td>row 16 cell 2</td>
    </tr>
    <tr>
      <td>row 17 cell 1</td>
      <td>row 17 cell 2</td>
    </tr>
    <tr>
      <td>row 18 cell 1</td>
      <td>row 18 cell 2</td>
    </tr>
    <tr>
      <td>row 19 cell 1</td>
      <td>row 19 cell 2</td>
    </tr>
    <tr>
      <td>row 20 cell 1</td>
      <td>row 20 cell 2</td>
    </tr>
    <tr>
      <td>row 21 cell 1</td>
      <td>row 21 cell 2</td>
    </tr>
    <tr>
      <td>row 22 cell 1</td>
      <td>row 22 cell 2</td>
    </tr>
    <tr>
      <td>row 23 cell 1</td>
      <td>row 23 cell 2</td>
    </tr>
    <tr>
      <td>row 24 cell 1</td>
      <td>row 24 cell 2</td>
    </tr>
    <tr>
      <td>row 25 cell 1</td>
      <td>row 25 cell 2</td>
    </tr>
    <tr>
      <td>row 26 cell 1</td>
      <td>row 26 cell 2</td>
    </tr>
    <tr>
      <td>row 27 cell 1</td>
      <td>row 27 cell 2</td>
    </tr>
    <tr>
      <td>row 28 cell 1</td>
      <td>row 28 cell 2</td>
    </tr>
    <tr>
      <td>row 29 cell 1</td>
      <td>row 29 cell 2</td>
    </tr>
    <tr>
      <td>row 30 cell 1</td>
      <td>row 30 cell 2</td>
    </tr>
    <tr>
      <td>row 31 cell 1</td>
      <td>row 31 cell 2</td>
    </tr>
    <tr>
      <td>row 32 cell 1</td>
      <td>row 32 cell 2</td>
    </tr>
    <tr>
      <td>row 33 cell 1</td>
      <td>row 33 cell 2</td>
    </tr>
    <tr>
      <td>row 34 cell 1</td>
      <td>row 34 cell 2</td>
    </tr>
    <tr>
      <td>row 35 cell 1</td>
      <td>row 35 cell 2</td>
    </tr>
    <tr>
      <td>row 36 cell 1</td>
      <td>row 36 cell 2</td>
    </tr>
    <tr>
      <td>row 37 cell 1</td>
      <td>row 37 cell 2</td>
    </tr>
    <tr>
      <td>row 38 cell 1</td>
      <td>row 38 cell 2</td>
    </tr>
    <tr>
      <td>row 39 cell 1</td>
      <td>row 39 cell 2</td>
    </tr>
    <tr>
      <td>row 40 cell 1</td>
      <td>row 40 cell 2</td>
    </tr>
    <tr>
      <td>row 41 cell 1</td>
      <td>row 41 cell 2</td>
    </tr>
    <tr>
      <td>row 42 cell 1</td>
      <td>row 42 cell 2</td>
    </tr>
    <tr>
      <td>row 43 cell 1</td>
      <td>row 43 cell 2</td>
    </tr>
    <tr>
      <td>row 44 cell 1</td>
      <td>row 44 cell 2</td>
    </tr>
    <tr>
      <td>row 45 cell 1</td>
      <td>row 45 cell 2</td>
    </tr>
    <tr>
      <td>row 46 cell 1</td>
      <td>row 46 cell 2</td>
    </tr>
  </table>
</div>

Note:

注意:

clip-path is relatively new, so you'll need to add browser prefixes and fall back to clip property, which is now deprecated (but has great Browser Compatibility) in favor of clip-path.

clip-path是相对较新的，所以您需要添加浏览器前缀并返回到clip属性，该属性现在已被弃用(但具有良好的浏览器兼容性)，而更适合使用clip-path。
clip property requires the element to be either absolute or fixed positioned

clip属性要求元素要么是绝对的，要么是固定的

side note: I've only tested this with latest versions of 固定页面，内容滚动在标题后面。 google-chrome and microsoft-edge. The table width is set to 100% only for demo purpose - so that it can be viewed easily in the snippet without horizontal scroll.

附注:我只测试了最新版本的google-chrome和microsoft-edge。表的宽度设置为100%，仅用于演示目的——这样就可以在代码片段中轻松地查看它，而不需要水平滚动。

#3

#tableContainer {
    height: 80%;
    margin: 0 auto;
    overflow: auto;
    position: fixed;
    top: 80px;
    width: 100%;
}

Update #tableContainer CSS with above attributes. As header is fixed and it always displays on top. content exceeds the page so browser scrolls the content behind header. we have to give height and overflow attributes to table container to overcome such issues.

用上面的属性更新#tableContainer CSS。当标题是固定的并且它总是显示在顶部。内容超过页面，因此浏览器会滚动标题后面的内容。我们必须为表容器提供高度和溢出属性，以克服这些问题。

#4

You can encapsulate content in a div with a fixed height and overflow:auto. Idea is to have a scroll of div and not of page.

您可以将内容封装在一个具有固定高度和溢出:auto的div中。想法是要有一个div的卷轴而不是页面。

Updated Fiddle. Note: Kindly check on Fiddle as window size may cause issues

更新的小提琴。注意:请检查小提琴，因为窗口大小可能引起问题

Code

html { 
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content{
  margin-top:100px;
  height:200px; 
  border:2px solid gray;
  overflow:auto;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
	position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
	position: fixed;
	width: 90%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.8);
	left: 0;
	right: 0;
	z-index: 0;
  overflow:auto;
}

#fixedHeader {
	position: fixed;
	left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
	z-index: 10;
}

#tableContainer {
	position: relative;
	top: 80px;
	width: 1200px;
	margin: 0 auto;
}

.stocks {
	margin: 20px auto;
}

h1 {
	font-size: 1.4em;
	text-align: center;
}

h2 {
	font-size: 1.2em;
	text-align: center;
}

<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div class="content">
    <div id="tableContainer">
      <table class="stocks compact display cell-border">
        <tr>
          <td>row 1 cell 1</td>
          <td>row 1 cell 2</td>
        </tr>
        <tr>
          <td>row 2 cell 1</td>
          <td>row 2 cell 2</td>
        </tr>
        <tr>
          <td>row 3 cell 1</td>
          <td>row 3 cell 2</td>
        </tr>
        <tr>
          <td>row 4 cell 1</td>
          <td>row 4 cell 2</td>
        </tr>
        <tr>
          <td>row 5 cell 1</td>
          <td>row 5 cell 2</td>
        </tr>
        <tr>
          <td>row 6 cell 1</td>
          <td>row 6 cell 2</td>
        </tr>
        <tr>
          <td>row 7 cell 1</td>
          <td>row 7 cell 2</td>
        </tr>
        <tr>
          <td>row 8 cell 1</td>
          <td>row 8 cell 2</td>
        </tr>
        <tr>
          <td>row 9 cell 1</td>
          <td>row 9 cell 2</td>
        </tr>
        <tr>
          <td>row 10 cell 1</td>
          <td>row 10 cell 2</td>
        </tr>
        <tr>
          <td>row 11 cell 1</td>
          <td>row 11 cell 2</td>
        </tr>
        <tr>
          <td>row 12 cell 1</td>
          <td>row 12 cell 2</td>
        </tr>
        <tr>
          <td>row 13 cell 1</td>
          <td>row 13 cell 2</td>
        </tr>
        <tr>
          <td>row 14 cell 1</td>
          <td>row 14 cell 2</td>
        </tr>
        <tr>
          <td>row 15 cell 1</td>
          <td>row 15 cell 2</td>
        </tr>
        <tr>
          <td>row 16 cell 1</td>
          <td>row 16 cell 2</td>
        </tr>
        <tr>
          <td>row 17 cell 1</td>
          <td>row 17 cell 2</td>
        </tr>
        <tr>
          <td>row 18 cell 1</td>
          <td>row 18 cell 2</td>
        </tr>
        <tr>
          <td>row 19 cell 1</td>
          <td>row 19 cell 2</td>
        </tr>
        <tr>
          <td>row 20 cell 1</td>
          <td>row 20 cell 2</td>
        </tr>
        <tr>
          <td>row 21 cell 1</td>
          <td>row 21 cell 2</td>
        </tr>
        <tr>
          <td>row 22 cell 1</td>
          <td>row 22 cell 2</td>
        </tr>
        <tr>
          <td>row 23 cell 1</td>
          <td>row 23 cell 2</td>
        </tr>
        <tr>
          <td>row 24 cell 1</td>
          <td>row 24 cell 2</td>
        </tr>
        <tr>
          <td>row 25 cell 1</td>
          <td>row 25 cell 2</td>
        </tr>
        <tr>
          <td>row 26 cell 1</td>
          <td>row 26 cell 2</td>
        </tr>
        <tr>
          <td>row 27 cell 1</td>
          <td>row 27 cell 2</td>
        </tr>
        <tr>
          <td>row 28 cell 1</td>
          <td>row 28 cell 2</td>
        </tr>
        <tr>
          <td>row 29 cell 1</td>
          <td>row 29 cell 2</td>
        </tr>
        <tr>
          <td>row 30 cell 1</td>
          <td>row 30 cell 2</td>
        </tr>
        <tr>
          <td>row 31 cell 1</td>
          <td>row 31 cell 2</td>
        </tr>
        <tr>
          <td>row 32 cell 1</td>
          <td>row 32 cell 2</td>
        </tr>
        <tr>
          <td>row 33 cell 1</td>
          <td>row 33 cell 2</td>
        </tr>
        <tr>
          <td>row 34 cell 1</td>
          <td>row 34 cell 2</td>
        </tr>
        <tr>
          <td>row 35 cell 1</td>
          <td>row 35 cell 2</td>
        </tr>
        <tr>
          <td>row 36 cell 1</td>
          <td>row 36 cell 2</td>
        </tr>
        <tr>
          <td>row 37 cell 1</td>
          <td>row 37 cell 2</td>
        </tr>
        <tr>
          <td>row 38 cell 1</td>
          <td>row 38 cell 2</td>
        </tr>
        <tr>
          <td>row 39 cell 1</td>
          <td>row 39 cell 2</td>
        </tr>
        <tr>
          <td>row 40 cell 1</td>
          <td>row 40 cell 2</td>
        </tr>
        <tr>
          <td>row 41 cell 1</td>
          <td>row 41 cell 2</td>
        </tr>
        <tr>
          <td>row 42 cell 1</td>
          <td>row 42 cell 2</td>
        </tr>
        <tr>
          <td>row 43 cell 1</td>
          <td>row 43 cell 2</td>
        </tr>
        <tr>
          <td>row 44 cell 1</td>
          <td>row 44 cell 2</td>
        </tr>
        <tr>
          <td>row 45 cell 1</td>
          <td>row 45 cell 2</td>
        </tr>
        <tr>
          <td>row 46 cell 1</td>
          <td>row 46 cell 2</td>
        </tr>
      </table>
    </div>
  </div>
</body>

#1

CSS:

CSS:

html,
body {
    margin: 0;
    padding: 0;
}
#background {
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}
#tableBackground {
    position: fixed;
    top: 30px;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0 auto;
}
#fixedHeader {
    position: fixed;
    overflow: hidden;
    left: 50%;
    top: 30px;
    margin-left: -600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}
#tableContainer {
    height: 80%;
    overflow: auto;
    position: fixed;
    top: 120px;
    width: 100%;
    margin: 0 auto;
}
.stocks {
    margin: 20px auto;
}
h1 {
    font-size: 1.4em;
    text-align: center;
}
h2 {
    font-size: 1.2em;
    text-align: center;
}

Here is working fiddle.

这是小提琴。

html,
body {
  margin: 0;
  padding: 0;
}
#background {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  top: 30px;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0 auto;
}
#fixedHeader {
  position: fixed;
  overflow: hidden;
  left: 50%;
  top: 30px;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  height: 80%;
  overflow: auto;
  position: fixed;
  top: 120px;
  width: 100%;
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}

<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div id="tableContainer">
    <table class="stocks compact display cell-border">
      <tr>
        <td>row 1 cell 1</td>
        <td>row 1 cell 2</td>
      </tr>
      <tr>
        <td>row 2 cell 1</td>
        <td>row 2 cell 2</td>
      </tr>
      <tr>
        <td>row 3 cell 1</td>
        <td>row 3 cell 2</td>
      </tr>
      <tr>
        <td>row 4 cell 1</td>
        <td>row 4 cell 2</td>
      </tr>
      <tr>
        <td>row 5 cell 1</td>
        <td>row 5 cell 2</td>
      </tr>
      <tr>
        <td>row 6 cell 1</td>
        <td>row 6 cell 2</td>
      </tr>
      <tr>
        <td>row 7 cell 1</td>
        <td>row 7 cell 2</td>
      </tr>
      <tr>
        <td>row 8 cell 1</td>
        <td>row 8 cell 2</td>
      </tr>
      <tr>
        <td>row 9 cell 1</td>
        <td>row 9 cell 2</td>
      </tr>
      <tr>
        <td>row 10 cell 1</td>
        <td>row 10 cell 2</td>
      </tr>
      <tr>
        <td>row 11 cell 1</td>
        <td>row 11 cell 2</td>
      </tr>
      <tr>
        <td>row 12 cell 1</td>
        <td>row 12 cell 2</td>
      </tr>
      <tr>
        <td>row 13 cell 1</td>
        <td>row 13 cell 2</td>
      </tr>
      <tr>
        <td>row 14 cell 1</td>
        <td>row 14 cell 2</td>
      </tr>
      <tr>
        <td>row 15 cell 1</td>
        <td>row 15 cell 2</td>
      </tr>
      <tr>
        <td>row 16 cell 1</td>
        <td>row 16 cell 2</td>
      </tr>
      <tr>
        <td>row 17 cell 1</td>
        <td>row 17 cell 2</td>
      </tr>
      <tr>
        <td>row 18 cell 1</td>
        <td>row 18 cell 2</td>
      </tr>
      <tr>
        <td>row 19 cell 1</td>
        <td>row 19 cell 2</td>
      </tr>
      <tr>
        <td>row 20 cell 1</td>
        <td>row 20 cell 2</td>
      </tr>
      <tr>
        <td>row 21 cell 1</td>
        <td>row 21 cell 2</td>
      </tr>
      <tr>
        <td>row 22 cell 1</td>
        <td>row 22 cell 2</td>
      </tr>
      <tr>
        <td>row 23 cell 1</td>
        <td>row 23 cell 2</td>
      </tr>
      <tr>
        <td>row 24 cell 1</td>
        <td>row 24 cell 2</td>
      </tr>
      <tr>
        <td>row 25 cell 1</td>
        <td>row 25 cell 2</td>
      </tr>
      <tr>
        <td>row 26 cell 1</td>
        <td>row 26 cell 2</td>
      </tr>
      <tr>
        <td>row 27 cell 1</td>
        <td>row 27 cell 2</td>
      </tr>
      <tr>
        <td>row 28 cell 1</td>
        <td>row 28 cell 2</td>
      </tr>
      <tr>
        <td>row 29 cell 1</td>
        <td>row 29 cell 2</td>
      </tr>
      <tr>
        <td>row 30 cell 1</td>
        <td>row 30 cell 2</td>
      </tr>
      <tr>
        <td>row 31 cell 1</td>
        <td>row 31 cell 2</td>
      </tr>
      <tr>
        <td>row 32 cell 1</td>
        <td>row 32 cell 2</td>
      </tr>
      <tr>
        <td>row 33 cell 1</td>
        <td>row 33 cell 2</td>
      </tr>
      <tr>
        <td>row 34 cell 1</td>
        <td>row 34 cell 2</td>
      </tr>
      <tr>
        <td>row 35 cell 1</td>
        <td>row 35 cell 2</td>
      </tr>
      <tr>
        <td>row 36 cell 1</td>
        <td>row 36 cell 2</td>
      </tr>
      <tr>
        <td>row 37 cell 1</td>
        <td>row 37 cell 2</td>
      </tr>
      <tr>
        <td>row 38 cell 1</td>
        <td>row 38 cell 2</td>
      </tr>
      <tr>
        <td>row 39 cell 1</td>
        <td>row 39 cell 2</td>
      </tr>
      <tr>
        <td>row 40 cell 1</td>
        <td>row 40 cell 2</td>
      </tr>
      <tr>
        <td>row 41 cell 1</td>
        <td>row 41 cell 2</td>
      </tr>
      <tr>
        <td>row 42 cell 1</td>
        <td>row 42 cell 2</td>
      </tr>
      <tr>
        <td>row 43 cell 1</td>
        <td>row 43 cell 2</td>
      </tr>
      <tr>
        <td>row 44 cell 1</td>
        <td>row 44 cell 2</td>
      </tr>
      <tr>
        <td>row 45 cell 1</td>
        <td>row 45 cell 2</td>
      </tr>
      <tr>
        <td>row 46 cell 1</td>
        <td>row 46 cell 2</td>
      </tr>
    </table>
  </div>
</body>

#2

If you absolutely want the scroll for entire page and not just for the header as in the question -

如果你绝对想要整个页面的滚动，而不仅仅是标题，在问题中-

you can use the new clip-path property with a little bit of script for modifying the clipping value when user scrolls, as shown below.

您可以使用带有一些脚本的新的剪切路径属性来修改用户滚动时的剪切值，如下所示。

$(window).on('scroll', function() {
  var scrolltop = $(this).scrollTop();
  $('.clip-me').css({
    '-webkit-clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip': 'rect(' + (scrolltop) + 'px, auto, auto, auto)'
  });
});

html {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
}
#fixedHeader {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  position: absolute; /*-The fallback clip proerty requires absolute of fixed-*/
  top: 80px;
  width: 100%; /*---------- Modified for demo purpose ------------*/
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<div id="tableBackground"></div>
<div id="fixedHeader">
  <h1>fixed header</h1>
  <h2>Subheading</h2>
</div>
<div id="tableContainer" class="clip-me">
  <table class="stocks compact display cell-border">
    <tr>
      <td>row 1 cell 1</td>
      <td>row 1 cell 2</td>
    </tr>
    <tr>
      <td>row 2 cell 1</td>
      <td>row 2 cell 2</td>
    </tr>
    <tr>
      <td>row 3 cell 1</td>
      <td>row 3 cell 2</td>
    </tr>
    <tr>
      <td>row 4 cell 1</td>
      <td>row 4 cell 2</td>
    </tr>
    <tr>
      <td>row 5 cell 1</td>
      <td>row 5 cell 2</td>
    </tr>
    <tr>
      <td>row 6 cell 1</td>
      <td>row 6 cell 2</td>
    </tr>
    <tr>
      <td>row 7 cell 1</td>
      <td>row 7 cell 2</td>
    </tr>
    <tr>
      <td>row 8 cell 1</td>
      <td>row 8 cell 2</td>
    </tr>
    <tr>
      <td>row 9 cell 1</td>
      <td>row 9 cell 2</td>
    </tr>
    <tr>
      <td>row 10 cell 1</td>
      <td>row 10 cell 2</td>
    </tr>
    <tr>
      <td>row 11 cell 1</td>
      <td>row 11 cell 2</td>
    </tr>
    <tr>
      <td>row 12 cell 1</td>
      <td>row 12 cell 2</td>
    </tr>
    <tr>
      <td>row 13 cell 1</td>
      <td>row 13 cell 2</td>
    </tr>
    <tr>
      <td>row 14 cell 1</td>
      <td>row 14 cell 2</td>
    </tr>
    <tr>
      <td>row 15 cell 1</td>
      <td>row 15 cell 2</td>
    </tr>
    <tr>
      <td>row 16 cell 1</td>
      <td>row 16 cell 2</td>
    </tr>
    <tr>
      <td>row 17 cell 1</td>
      <td>row 17 cell 2</td>
    </tr>
    <tr>
      <td>row 18 cell 1</td>
      <td>row 18 cell 2</td>
    </tr>
    <tr>
      <td>row 19 cell 1</td>
      <td>row 19 cell 2</td>
    </tr>
    <tr>
      <td>row 20 cell 1</td>
      <td>row 20 cell 2</td>
    </tr>
    <tr>
      <td>row 21 cell 1</td>
      <td>row 21 cell 2</td>
    </tr>
    <tr>
      <td>row 22 cell 1</td>
      <td>row 22 cell 2</td>
    </tr>
    <tr>
      <td>row 23 cell 1</td>
      <td>row 23 cell 2</td>
    </tr>
    <tr>
      <td>row 24 cell 1</td>
      <td>row 24 cell 2</td>
    </tr>
    <tr>
      <td>row 25 cell 1</td>
      <td>row 25 cell 2</td>
    </tr>
    <tr>
      <td>row 26 cell 1</td>
      <td>row 26 cell 2</td>
    </tr>
    <tr>
      <td>row 27 cell 1</td>
      <td>row 27 cell 2</td>
    </tr>
    <tr>
      <td>row 28 cell 1</td>
      <td>row 28 cell 2</td>
    </tr>
    <tr>
      <td>row 29 cell 1</td>
      <td>row 29 cell 2</td>
    </tr>
    <tr>
      <td>row 30 cell 1</td>
      <td>row 30 cell 2</td>
    </tr>
    <tr>
      <td>row 31 cell 1</td>
      <td>row 31 cell 2</td>
    </tr>
    <tr>
      <td>row 32 cell 1</td>
      <td>row 32 cell 2</td>
    </tr>
    <tr>
      <td>row 33 cell 1</td>
      <td>row 33 cell 2</td>
    </tr>
    <tr>
      <td>row 34 cell 1</td>
      <td>row 34 cell 2</td>
    </tr>
    <tr>
      <td>row 35 cell 1</td>
      <td>row 35 cell 2</td>
    </tr>
    <tr>
      <td>row 36 cell 1</td>
      <td>row 36 cell 2</td>
    </tr>
    <tr>
      <td>row 37 cell 1</td>
      <td>row 37 cell 2</td>
    </tr>
    <tr>
      <td>row 38 cell 1</td>
      <td>row 38 cell 2</td>
    </tr>
    <tr>
      <td>row 39 cell 1</td>
      <td>row 39 cell 2</td>
    </tr>
    <tr>
      <td>row 40 cell 1</td>
      <td>row 40 cell 2</td>
    </tr>
    <tr>
      <td>row 41 cell 1</td>
      <td>row 41 cell 2</td>
    </tr>
    <tr>
      <td>row 42 cell 1</td>
      <td>row 42 cell 2</td>
    </tr>
    <tr>
      <td>row 43 cell 1</td>
      <td>row 43 cell 2</td>
    </tr>
    <tr>
      <td>row 44 cell 1</td>
      <td>row 44 cell 2</td>
    </tr>
    <tr>
      <td>row 45 cell 1</td>
      <td>row 45 cell 2</td>
    </tr>
    <tr>
      <td>row 46 cell 1</td>
      <td>row 46 cell 2</td>
    </tr>
  </table>
</div>

Note:

注意:

clip-path is relatively new, so you'll need to add browser prefixes and fall back to clip property, which is now deprecated (but has great Browser Compatibility) in favor of clip-path.

clip-path是相对较新的，所以您需要添加浏览器前缀并返回到clip属性，该属性现在已被弃用(但具有良好的浏览器兼容性)，而更适合使用clip-path。
clip property requires the element to be either absolute or fixed positioned

clip属性要求元素要么是绝对的，要么是固定的

#3

#tableContainer {
    height: 80%;
    margin: 0 auto;
    overflow: auto;
    position: fixed;
    top: 80px;
    width: 100%;
}

#4

You can encapsulate content in a div with a fixed height and overflow:auto. Idea is to have a scroll of div and not of page.

您可以将内容封装在一个具有固定高度和溢出:auto的div中。想法是要有一个div的卷轴而不是页面。

Updated Fiddle. Note: Kindly check on Fiddle as window size may cause issues

更新的小提琴。注意:请检查小提琴，因为窗口大小可能引起问题

Code

html { 
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content{
  margin-top:100px;
  height:200px; 
  border:2px solid gray;
  overflow:auto;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
	position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
	position: fixed;
	width: 90%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.8);
	left: 0;
	right: 0;
	z-index: 0;
  overflow:auto;
}

#fixedHeader {
	position: fixed;
	left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
	z-index: 10;
}

#tableContainer {
	position: relative;
	top: 80px;
	width: 1200px;
	margin: 0 auto;
}

.stocks {
	margin: 20px auto;
}

h1 {
	font-size: 1.4em;
	text-align: center;
}

h2 {
	font-size: 1.2em;
	text-align: center;
}

<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div class="content">
    <div id="tableContainer">
      <table class="stocks compact display cell-border">
        <tr>
          <td>row 1 cell 1</td>
          <td>row 1 cell 2</td>
        </tr>
        <tr>
          <td>row 2 cell 1</td>
          <td>row 2 cell 2</td>
        </tr>
        <tr>
          <td>row 3 cell 1</td>
          <td>row 3 cell 2</td>
        </tr>
        <tr>
          <td>row 4 cell 1</td>
          <td>row 4 cell 2</td>
        </tr>
        <tr>
          <td>row 5 cell 1</td>
          <td>row 5 cell 2</td>
        </tr>
        <tr>
          <td>row 6 cell 1</td>
          <td>row 6 cell 2</td>
        </tr>
        <tr>
          <td>row 7 cell 1</td>
          <td>row 7 cell 2</td>
        </tr>
        <tr>
          <td>row 8 cell 1</td>
          <td>row 8 cell 2</td>
        </tr>
        <tr>
          <td>row 9 cell 1</td>
          <td>row 9 cell 2</td>
        </tr>
        <tr>
          <td>row 10 cell 1</td>
          <td>row 10 cell 2</td>
        </tr>
        <tr>
          <td>row 11 cell 1</td>
          <td>row 11 cell 2</td>
        </tr>
        <tr>
          <td>row 12 cell 1</td>
          <td>row 12 cell 2</td>
        </tr>
        <tr>
          <td>row 13 cell 1</td>
          <td>row 13 cell 2</td>
        </tr>
        <tr>
          <td>row 14 cell 1</td>
          <td>row 14 cell 2</td>
        </tr>
        <tr>
          <td>row 15 cell 1</td>
          <td>row 15 cell 2</td>
        </tr>
        <tr>
          <td>row 16 cell 1</td>
          <td>row 16 cell 2</td>
        </tr>
        <tr>
          <td>row 17 cell 1</td>
          <td>row 17 cell 2</td>
        </tr>
        <tr>
          <td>row 18 cell 1</td>
          <td>row 18 cell 2</td>
        </tr>
        <tr>
          <td>row 19 cell 1</td>
          <td>row 19 cell 2</td>
        </tr>
        <tr>
          <td>row 20 cell 1</td>
          <td>row 20 cell 2</td>
        </tr>
        <tr>
          <td>row 21 cell 1</td>
          <td>row 21 cell 2</td>
        </tr>
        <tr>
          <td>row 22 cell 1</td>
          <td>row 22 cell 2</td>
        </tr>
        <tr>
          <td>row 23 cell 1</td>
          <td>row 23 cell 2</td>
        </tr>
        <tr>
          <td>row 24 cell 1</td>
          <td>row 24 cell 2</td>
        </tr>
        <tr>
          <td>row 25 cell 1</td>
          <td>row 25 cell 2</td>
        </tr>
        <tr>
          <td>row 26 cell 1</td>
          <td>row 26 cell 2</td>
        </tr>
        <tr>
          <td>row 27 cell 1</td>
          <td>row 27 cell 2</td>
        </tr>
        <tr>
          <td>row 28 cell 1</td>
          <td>row 28 cell 2</td>
        </tr>
        <tr>
          <td>row 29 cell 1</td>
          <td>row 29 cell 2</td>
        </tr>
        <tr>
          <td>row 30 cell 1</td>
          <td>row 30 cell 2</td>
        </tr>
        <tr>
          <td>row 31 cell 1</td>
          <td>row 31 cell 2</td>
        </tr>
        <tr>
          <td>row 32 cell 1</td>
          <td>row 32 cell 2</td>
        </tr>
        <tr>
          <td>row 33 cell 1</td>
          <td>row 33 cell 2</td>
        </tr>
        <tr>
          <td>row 34 cell 1</td>
          <td>row 34 cell 2</td>
        </tr>
        <tr>
          <td>row 35 cell 1</td>
          <td>row 35 cell 2</td>
        </tr>
        <tr>
          <td>row 36 cell 1</td>
          <td>row 36 cell 2</td>
        </tr>
        <tr>
          <td>row 37 cell 1</td>
          <td>row 37 cell 2</td>
        </tr>
        <tr>
          <td>row 38 cell 1</td>
          <td>row 38 cell 2</td>
        </tr>
        <tr>
          <td>row 39 cell 1</td>
          <td>row 39 cell 2</td>
        </tr>
        <tr>
          <td>row 40 cell 1</td>
          <td>row 40 cell 2</td>
        </tr>
        <tr>
          <td>row 41 cell 1</td>
          <td>row 41 cell 2</td>
        </tr>
        <tr>
          <td>row 42 cell 1</td>
          <td>row 42 cell 2</td>
        </tr>
        <tr>
          <td>row 43 cell 1</td>
          <td>row 43 cell 2</td>
        </tr>
        <tr>
          <td>row 44 cell 1</td>
          <td>row 44 cell 2</td>
        </tr>
        <tr>
          <td>row 45 cell 1</td>
          <td>row 45 cell 2</td>
        </tr>
        <tr>
          <td>row 46 cell 1</td>
          <td>row 46 cell 2</td>
        </tr>
      </table>
    </div>
  </div>
</body>

秒客网

固定页面，内容滚动在标题后面。

4 个解决方案

#1

#2

#3

#4

Code

#1

#2

#3

#4

Code

相关文章