编辑

Question

我尝试搜索堆栈溢出，以为肯定有人已经问过这个菜鸟问题了。我找不到解决方案，因此将其发布为新问题。我有一个HTML代码，需要显示为报告。

<html>
<style>
body {
    background-color: rgb(59, 75, 84);
    font-family:      arial, verdana, trebuchet, officina, sans-serif;
    margin: 1; }

.top-container {
    background-color: #f1f1f1;
    padding: 1px;
    text-align: center;
}

.mid-container {
    background-color: rgb(38, 52 ,63);
    padding: 1px;
    text-align: left;
}

.header {
    text-align: center;
    padding: 5px 8px;
    background: rgb(25, 165, 88);
    color: #f1f1f1;
    position:relative;
    margin: 1;
    z-index: 100;
}

.mid-container {
    padding: 1px;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.sticky + .mid-container {
    position:absolute;
    overflow: auto;
    padding-top:auto;
}

table
{
    margin-bottom:    10px;
    vertical-align:   top; 
    border:           0;
    border-spacing:   1px;
    padding:          2px;
}

.HeadingTable
{
    width:            100%;
    text-align:       center;
    margin-top:       15px;
    margin-bottom:    30px;
    margin-left:      auto;
    margin-right:     auto;
    background-color: rgb(220, 221, 222);
}

.SubHeadingTable
{
    width:            100%;
    text-align:       center;
    margin-top:       15px;
    margin-bottom:    25px;
    background-color: rgb(220, 221, 222);
}

.ResultTable
{
    width:          100%;
    text-align:     left;
    padding-right:  20px;
}

table.ResultTable td
{
    vertical-align: top;
}

.OverallResultTable
{
    width:         50%;
    text-align:    center;
    margin-bottom: 20px;
    margin-left:   auto;
    margin-right:  auto;
    font-weight:   bold;
}

.TableHeadingCell
{
    background-color: rgb(179, 179, 179);
    font-family:      arial, verdana, trebuchet, officina, sans-serif;
    font-weight:      bold;
    text-align:       center;
}

.CellNoColor
{
    text-align:     left;
    vertical-align: top;
}   

.DefaultCell
{
    background-color: rgb(229, 229, 229);
    text-align:       left;
}

.NumberCell
{
    background-color: rgb(229, 229, 229);
    text-align:       center;
    min-width:        50px;
}

.PositiveResultCell
{
    text-align:       center;
    background-color: rgb(25, 165, 88);
}

.NegativeResultCell
{
    text-align:       center;
    background-color: rgb(240, 0, 0);
}

.WarningCell
{
    text-align:       center;
    background-color: rgb(255, 255, 0);
}

.NegativeResult
{
    background-color: rgb(240, 0, 0);
    text-align:       center;
    font-weight:      bold;
}

.PositiveResult
{
    background-color: rgb(25, 165, 88);
    text-align:       center;
    font-weight:      bold;
}

.Heading1
{
    font-family: arial, sans-serif;
    font-weight: bold;
    font-size:   26px;
}

.Heading2
{
    font-family: arial, sans-serif;
    font-weight: bold;
    font-size:   20px;
}

.Heading3
{
    font-family:   arial, sans-serif;
    font-weight:   bold;
    font-size:     18px;
    margin-bottom: 20px;
    margin-top:    20px;
}

.Heading4
{
    font-family:   arial, sans-serif;
    font-weight:   bold;
    font-size:     16px;
    margin-top:    10px;
    margin-bottom: 10px;
}

.Heading5
{
    font-family:   arial, sans-serif;
    font-weight:   bold;
    font-size:     14px;
    margin-top:    8px;
    margin-bottom: 8px;
}

p
{
    Margin-bottom: 20px;
}

.TestGroupHeadingBackground
{
    background-color: rgb(179, 179, 179);
}

.Indentation
{
    margin-left:  20px;
}

</style>

<head>
    <title>NVM Comparision Report</title>
</head>
<body>

    <div class="top-container">
        <h1>NVM Memory Comparision Report</h1>
    </div>

    <div class="header" id="myHeader">
        <h2>Overall Report Passed</h2>
    </div>

    <div class="mid-container">
        <h3>General Information</h3>
    </div>

    <div class="Heading4">Test Setup</div>
      <div class="Indentation">
        <table cellpadding="10">
            <td class="CellNoColor">Report Generation: </td>
            <td class="CellNoColor">Success</td>
          </tr>
          <tr>
            <td class="CellNoColor">File's Root Path: </td>
            <td class="CellNoColor">New XXX Path:   XXX</td>
          </tr>
          <tr>
            <td class="CellNoColor">Configuration Comment: </td>
            <td class="CellNoColor">XXX</td>
          </tr>
          <tr>
            <td class="CellNoColor">XXX: </td>
            <td class="CellNoColor">XXX</td>
          </tr>
        </table>
      </div>

      <div class="Heading4">Blocks Present in DataConfig</div>

      <div class="Heading5">New Version:0042</div>
        <div class="Indentation" style="float: none;">
          <table cellpadding="5" width = "70%">
            <tr>
              <th class="TableHeadingCell" width="18%">Dataset Name</th>
              <th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
              <th class="TableHeadingCell">Blocks Present</th>
              <th class="TableHeadingCell" width="10%">Result</th>
            </tr>
            <tr>
              <td class="TableHeadingCell">All Datasets</td>
              <td class="DefaultCell" style = text-align:center;>All Sparepart Numbers</td>
              <td class="DefaultCell">   Blocks 81, 99, 115, 120, 121, 133</td>
              <td class="PositiveResult">Pass</td>
            </tr>
          </table>
        </div>
    <div class="Heading5">Old Version:0041</div>
        <div class="Indentation" style="float: none;">
          <table cellpadding="5" width = "70%">
            <tr>
              <th class="TableHeadingCell" width="18%">Dataset Name</th>
              <th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
              <th class="TableHeadingCell">Blocks Present</th>
              <th class="TableHeadingCell" width="10%">Result</th>
            </tr>
            <tr>
              <td class="TableHeadingCell">All Datasets</td>
              <td class="DefaultCell" style = text-align:center;>All Sparepart Numbers</td>
              <td class="DefaultCell">   Blocks 81, 99, 115</td>
              <td class="PositiveResult">Pass</td>
            </tr>
          </table>
        </div>

      <div class="Heading4">Following Blocks are Missing in New FEE Dumps:</div>
      <div class="Indentation" style="float: none;">
          <table cellpadding="5" width = "70%">
            <tr>
              <th class="TableHeadingCell" width="18%">File Name</th>
              <th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
              <th class="TableHeadingCell">Blocks Missing</th>
              <th class="TableHeadingCell" width="10%">Result</th>
            </tr>
            <tr>
              <td class="TableHeadingCell">All Files</td>
              <td class="DefaultCell" style = text-align:center;>All</td>
              <td class="DefaultCell"></td>
              <td class="WarningCell" rowspan=2>Pass</td>
            </tr>
          </table>
        </div>
      <div class="Heading4">Following Blocks are Missing in Old FEE Dumps:</div>
      <div class="Indentation" style="float: none;">
          <table cellpadding="5" width = "70%">
            <tr>
              <th class="TableHeadingCell" width="18%">File Name</th>
              <th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
              <th class="TableHeadingCell">Blocks Missing</th>
              <th class="TableHeadingCell" width="10%">Result</th>
            </tr>
            <tr>
              <td class="TableHeadingCell">All Files</td>
              <td class="DefaultCell" style = text-align:center;>All</td>
              <td class="DefaultCell"></td>
              <td class="WarningCell" rowspan=2>Pass</td>
            </tr>
          </table>
        </div>

    <table cellpadding="5" class="SubHeadingTable">
      <tr>
        <td>
          <big class="Heading2">Detailed Comparision Between FEE DUMPs</big>
        </td>
      </tr>
    </table>

    <div class="Indentation"></div>
  <table cellpadding="5" class="TestGroupHeadingBackground">
    <tr>
      <td>
        <big class="Heading3">XXX : </big>
      </td>
    </tr>
  </table>
    <div class="Indentation">
      <p>Report is based on data obtained from comparing files XXX and XXX in folder RdW.</p>
    </div>
    <div class="Indentation"></div>
    <div class="Indentation">
    <table cellpadding="5" class="ResultTable">
      <tr>
        <th class="TableHeadingCell" width="4%">Block ID</th>
        <th class="TableHeadingCell" width="4%">Block Address</th>
        <th class="TableHeadingCell" width="10%">Block Name</th>
        <th class="TableHeadingCell" width="10%">Parameter Name</th>
        <th class="TableHeadingCell" width="4%">Size</th>
        <th class="TableHeadingCell" width="auto">Old Data</th>
        <th class="TableHeadingCell" width="auto">New Data</th>
        <th class="TableHeadingCell" width="8%">Result</th>
      </tr>

      <tr>
        <td style="vertical-align: middle;" class="NumberCell">3</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>
            <tr>
        <td style="vertical-align: middle;" class="NumberCell">5</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>
            <tr>
        <td style="vertical-align: middle;" class="NumberCell">45</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>

    </table>
</div>
       <div class="Indentation"></div>
  <table cellpadding="5" class="TestGroupHeadingBackground">
    <tr>
      <td>
        <big class="Heading3">XXX</big>
      </td>
    </tr>
  </table>
    <div class="Indentation">
      <p>Report is based on data obtained from comparing files XXX and XXX in folder USA.</p>
    </div>
    <div class="Indentation"></div>
    <div class="Indentation">
    <table cellpadding="5" class="ResultTable">
      <tr>
        <th class="TableHeadingCell" width="4%">Block ID</th>
        <th class="TableHeadingCell" width="4%">Block Address</th>
        <th class="TableHeadingCell" width="10%">Block Name</th>
        <th class="TableHeadingCell" width="10%">Parameter Name</th>
        <th class="TableHeadingCell" width="4%">Size</th>
        <th class="TableHeadingCell" width="auto">Old Data</th>
        <th class="TableHeadingCell" width="auto">New Data</th>
        <th class="TableHeadingCell" width="8%">Result</th>
      </tr>

      <tr>
        <td style="vertical-align: middle;" class="NumberCell">3</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>
            <tr>
        <td style="vertical-align: middle;" class="NumberCell">5</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
        <td style="vertical-align: middle;" class="DefaultCell">Fbl_Global</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>
            <tr>
        <td style="vertical-align: middle;" class="NumberCell">45</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
        <td style="vertical-align: middle;" class="DefaultCell">ProdData</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>

    </table>
</div>

    <table cellpadding="5" class="SubHeadingTable">
      <tr>
        <td>
          <big class="Heading2">End of Report</big>
        </td>
      </tr>
    </table>
    <div class="Heading4" style="text-align=right;">Author: XXX</div>

    <script>
        window.onscroll = function()
        {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction()
        {
            if (window.pageYOffset > sticky)
            {
                header.classList.add("sticky");
            }
            else
            {
                header.classList.remove("sticky");
            }
        }
    </script>

</body>

当我在IE或chrome中运行它时，“通过总体报告”即时贴会固定在顶部，但是在越过该跨接点时整个屏幕会闪烁一下。我可以通过在.sticky + .mid-container {}块内提供padding-top：63px而不是auto（不确定auto的功能）来为屏幕修复此问题

有人可以建议我如何避免所有屏幕尺寸+分辨率都普遍出现这种闪烁吗？我正在使用IE 11 + Mozilla Firefox。仅当从粘滞文本向下滚动（从“通过的总体报告”滚动到“常规信息”）时才会发生闪烁

Answer 1

您要做的是通过添加此类.sticky将头从文档流中移出，同时从相对位置更改为绝对位置，同时应用.sticky + .mid-container，将绝对位置应用于{ {1}}就是造成口吃的原因，如果只是在div.mid-container上加了一个空白，那么当标题超出文档流时，元素不会对此做出反应，因此空白顶部等于达到标题的高度。

div.mid-container

.sticky + .mid-container {
    /* position:absolute; Removed */

    /* Added : 39px is the height of your header. */
    /* If this varies just include js to make it dynamic. */
    margin-top:39px; 
    overflow: auto;
    /* padding-top:auto; Removed : auto is not a valid value for padding */
}

window.onscroll = function() {
  myFunction()
};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  // i figured it should be '>='
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(59, 75, 84);
  font-family: arial, verdana, trebuchet, officina, sans-serif;
  margin: 1;
}

.top-container {
  background-color: #f1f1f1;
  padding: 1px;
  text-align: center;
}

.mid-container {
  background-color: rgb(38, 52, 63);
  padding: 1px;
  text-align: left;
}

.header {
  text-align: center;
  padding: 5px 8px;
  background: rgb(25, 165, 88);
  color: #f1f1f1;
  position: relative;
  margin: 1;
  z-index: 100;
}

.mid-container {
  padding: 1px;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.sticky+.mid-container {
  margin-top: 39px;
  overflow: auto;
}

table {
  margin-bottom: 10px;
  vertical-align: top;
  border: 0;
  border-spacing: 1px;
  padding: 2px;
}

.HeadingTable {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(220, 221, 222);
}

.SubHeadingTable {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 25px;
  background-color: rgb(220, 221, 222);
}

.ResultTable {
  width: 100%;
  text-align: left;
  padding-right: 20px;
}

table.ResultTable td {
  vertical-align: top;
}

.OverallResultTable {
  width: 50%;
  text-align: center;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}

.TableHeadingCell {
  background-color: rgb(179, 179, 179);
  font-family: arial, verdana, trebuchet, officina, sans-serif;
  font-weight: bold;
  text-align: center;
}

.CellNoColor {
  text-align: left;
  vertical-align: top;
}

.DefaultCell {
  background-color: rgb(229, 229, 229);
  text-align: left;
}

.NumberCell {
  background-color: rgb(229, 229, 229);
  text-align: center;
  min-width: 50px;
}

.PositiveResultCell {
  text-align: center;
  background-color: rgb(25, 165, 88);
}

.NegativeResultCell {
  text-align: center;
  background-color: rgb(240, 0, 0);
}

.WarningCell {
  text-align: center;
  background-color: rgb(255, 255, 0);
}

.NegativeResult {
  background-color: rgb(240, 0, 0);
  text-align: center;
  font-weight: bold;
}

.PositiveResult {
  background-color: rgb(25, 165, 88);
  text-align: center;
  font-weight: bold;
}

.Heading1 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 26px;
}

.Heading2 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.Heading3 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.Heading4 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.Heading5 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
}

p {
  Margin-bottom: 20px;
}

.TestGroupHeadingBackground {
  background-color: rgb(179, 179, 179);
}

.Indentation {
  margin-left: 20px;
}

编辑

请注意，我必须删除一些标记，以便我可以发布修改，但超出了限制。

<div class="top-container">
  <h1>NVM Memory Comparision Report</h1>
</div>

<div class="header" id="myHeader">
  <h2>Overall Report Passed</h2>
</div>

<div class="mid-container" style="margin-top: 0px;">
  <h3>General Information</h3>
</div>

<div class="Heading4">Test Setup</div>
<div class="Indentation">
  <table cellpadding="10">
    <tbody>
      <tr>
        <td class="CellNoColor">Report Generation: </td>
        <td class="CellNoColor">Success</td>
      </tr>
      <tr>
        <td class="CellNoColor">File's Root Path: </td>
        <td class="CellNoColor">New XXX Path: XXX</td>
      </tr>
      <tr>
        <td class="CellNoColor">Configuration Comment: </td>
        <td class="CellNoColor">XXX</td>
      </tr>
      <tr>
        <td class="CellNoColor">XXX: </td>
        <td class="CellNoColor">XXX</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="Heading4">Blocks Present in DataConfig</div>

<div class="Heading5">New Version:0042</div>
<div class="Indentation" style="float: none;">
  <table cellpadding="5" width="70%">
    <tbody>
      <tr>
        <th class="TableHeadingCell" width="18%">Dataset Name</th>
        <th class="TableHeadingCell" width="12%" text-align:center;="">SparePart Number</th>
        <th class="TableHeadingCell">Blocks Present</th>
        <th class="TableHeadingCell" width="10%">Result</th>
      </tr>
      <tr>
        <td class="TableHeadingCell">All Datasets</td>
        <td class="DefaultCell" style="t" ext-align:center;="">All Sparepart Numbers</td>
        <td class="DefaultCell"> Blocks 81, 99, 115, 120, 121, 133</td>
        <td class="PositiveResult">Pass</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="Heading5">Old Version:0041</div>
<div class="Indentation" style="float: none;">
  <table cellpadding="5" width="70%">
    <tbody>
      <tr>
        <th class="TableHeadingCell" width="18%">Dataset Name</th>
        <th class="TableHeadingCell" width="12%" text-align:center;="">SparePart Number</th>
        <th class="TableHeadingCell">Blocks Present</th>
        <th class="TableHeadingCell" width="10%">Result</th>
      </tr>
      <tr>
        <td class="TableHeadingCell">All Datasets</td>
        <td class="DefaultCell" style="t" ext-align:center;="">All Sparepart Numbers</td>
        <td class="DefaultCell"> Blocks 81, 99, 115</td>
        <td class="PositiveResult">Pass</td>
      </tr>
    </tbody>
  </table>
</div>






<table cellpadding="5" class="SubHeadingTable">
  <tbody>
    <tr>
      <td>
        <big class="Heading2">Detailed Comparision Between FEE DUMPs</big>
      </td>
    </tr>
  </tbody>
</table>






<div class="Indentation"></div>
<table cellpadding="5" class="TestGroupHeadingBackground">
  <tbody>
    <tr>
      <td>
        <big class="Heading3">XXX</big>
      </td>
    </tr>
  </tbody>
</table>
<div class="Indentation">
  <p>Report is based on data obtained from comparing files XXX and XXX in folder USA.</p>
</div>
<div class="Indentation"></div>
<div class="Indentation">
  <table cellpadding="5" class="ResultTable">
    <tbody>
      <tr>
        <th class="TableHeadingCell" width="4%">Block ID</th>
        <th class="TableHeadingCell" width="4%">Block Address</th>
        <th class="TableHeadingCell" width="10%">Block Name</th>
        <th class="TableHeadingCell" width="10%">Parameter Name</th>
        <th class="TableHeadingCell" width="4%">Size</th>
        <th class="TableHeadingCell" width="auto">Old Data</th>
        <th class="TableHeadingCell" width="auto">New Data</th>
        <th class="TableHeadingCell" width="8%">Result</th>
      </tr>

      <tr>
        <td style="vertical-align: middle;" class="NumberCell">3</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>
      <tr>
        <td style="vertical-align: middle;" class="NumberCell">5</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
        <td style="vertical-align: middle;" class="DefaultCell">Fbl_Global</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>
      <tr>
        <td style="vertical-align: middle;" class="NumberCell">45</td>
        <td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
        <td style="vertical-align: middle;" class="DefaultCell">ProdData</td>
        <td style="vertical-align: middle;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
        <td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
      </tr>

    </tbody>
  </table>
</div>

<table cellpadding="5" class="SubHeadingTable">
  <tbody>
    <tr>
      <td>
        <big class="Heading2">End of Report</big>
      </td>
    </tr>
  </tbody>
</table>
<div class="Heading4" style="text-align=right;">Author: XXX</div>

// we get the header height then apply it as marginTop to
// .mid-container
// removed the .sticky + .mid-container{} styling
// because we don't know the height of the header
// so we can't hard code it.

window.onscroll = function() {
  myFunction()
};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  // i figured it should be '>='
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");

    document.querySelector('.mid-container').style.marginTop = header.getBoundingClientRect().height + "px";
  } else {
    header.classList.remove("sticky");
    document.querySelector('.mid-container').style.marginTop = "0px";
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(59, 75, 84);
  font-family: arial, verdana, trebuchet, officina, sans-serif;
  margin: 1;
}

.top-container {
  background-color: #f1f1f1;
  padding: 1px;
  text-align: center;
}

.mid-container {
  background-color: rgb(38, 52, 63);
  padding: 1px;
  text-align: left;
}

.header {
  text-align: center;
  padding: 5px 8px;
  background: rgb(25, 165, 88);
  color: #f1f1f1;
  position: relative;
  margin: 1;
  z-index: 100;
  /* For refrence */
  height: 300px;
}

.mid-container {
  padding: 1px;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.sticky+.mid-container {
  margin-top: 39px;
  overflow: auto;
}

table {
  margin-bottom: 10px;
  vertical-align: top;
  border: 0;
  border-spacing: 1px;
  padding: 2px;
}

.HeadingTable {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(220, 221, 222);
}

.SubHeadingTable {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 25px;
  background-color: rgb(220, 221, 222);
}

.ResultTable {
  width: 100%;
  text-align: left;
  padding-right: 20px;
}

table.ResultTable td {
  vertical-align: top;
}

.OverallResultTable {
  width: 50%;
  text-align: center;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}

.TableHeadingCell {
  background-color: rgb(179, 179, 179);
  font-family: arial, verdana, trebuchet, officina, sans-serif;
  font-weight: bold;
  text-align: center;
}

.CellNoColor {
  text-align: left;
  vertical-align: top;
}

.DefaultCell {
  background-color: rgb(229, 229, 229);
  text-align: left;
}

.NumberCell {
  background-color: rgb(229, 229, 229);
  text-align: center;
  min-width: 50px;
}

.PositiveResultCell {
  text-align: center;
  background-color: rgb(25, 165, 88);
}

.NegativeResultCell {
  text-align: center;
  background-color: rgb(240, 0, 0);
}

.WarningCell {
  text-align: center;
  background-color: rgb(255, 255, 0);
}

.NegativeResult {
  background-color: rgb(240, 0, 0);
  text-align: center;
  font-weight: bold;
}

.PositiveResult {
  background-color: rgb(25, 165, 88);
  text-align: center;
  font-weight: bold;
}

.Heading1 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 26px;
}

.Heading2 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.Heading3 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.Heading4 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.Heading5 {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
}

p {
  Margin-bottom: 20px;
}

.TestGroupHeadingBackground {
  background-color: rgb(179, 179, 179);
}

.Indentation {
  margin-left: 20px;
}

HTML：跨越固定在页面顶部的粘性文本时，滚动过程中屏幕出现死机

1 个答案:

编辑