html - 固定顶部div

我使用的是原生 CSS 和 html(没有 jquery，没有 js，也没有 bootstrap)。我设法使左列固定，并将滚动条放在顶部。

现在我希望在向下滚动时固定顶行(标记为红色)。

Google 电子表格做得很好:https://docs.google.com/spreadsheets/d/1Ai9kcTj5hLFKkBAx3TRFfhKMYR9MFgHAFJAC-BTgmqM/edit?usp=sharing

你可以玩这个: https://codepen.io/anon/pen/zPpNRL

.wrap{
  width:100%;
}
.left-col .col,.right-col .col{
  border:solid 1px #ffd6d6;
}
.symbol{
  line-height:35px;
}
.row .col{
  line-height:35px;
  float:left;
  
}

.left-col{
  width:250px;
  float:left;
}
.right-col{
  overflow-x: auto;
  overflow-y: hidden;
  
  white-space: nowrap; 
}
.head{
  line-height:35px;
  font-weight:bold;
}
.right-col .row .col{
  width:250px;
  display: inline-block;
  float:none;
}

.right-col ,.right-col .row .col {
  transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

<div class="wrap">
  <div class="left-col">
    <div class="symbol col" style="height:52px;font-weight:bold">Symbol fixed</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
  </div>
  <div class="right-col">
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row head">
      <div class="col">A fixed</div>
      <div class="col">B fixed</div>
      <div class="col">C fixed</div>
      <div class="col">D fixed</div>
      <div class="col">E fixed</div>
      <div class="col">F fixed</div>
      <div class="col">G fixed</div>
      <div class="col">H fixed</div>
      <div class="col">I fixed</div>
    </div>
  </div>
</div>

最佳答案

首先，您使用 transform: rotate(180deg) 有什么具体原因吗？

要将元素“固定”到窗口，您可以使用 css 属性 position:fixed。

为此，我添加了以下代码:

.head{
  line-height:35px;  /* was already here from your own code */
  font-weight:bold;  /* was already here from your own code */ 
  position:fixed;
  background:#fff;
  top:0;
}

这会将 .head 容器固定到顶部。

另请注意，我已经移动了您的 HTML 的顺序，将 .head 行向上移动到 .symbol 容器下方。没有 position:fixed 这将消除使用 transform:rotate(180deg) 的需要，到目前为止我真的看不出背后的原因(？) - 因此我'我们还删除了 transform:rotate() 部分。

我还在 .right-col 中添加了 margin-top: 36px 来“下推”这个容器，以确保 . head 元素没有放在第一行之上，因此隐藏了一些内容。我还在 .left-col 中添加了 margin-top: -36px 以使其与 position:fixed head 元素对齐。

我做的最后一件事是删除 body 的边距(您没有明确地这样做，因此是从浏览器自动添加的)。否则 top:0 会在左侧行和窗口顶部之间留下一个空隙。

例子可以在这里看到:

.wrap{
  width:100%;
}
.left-col .col,.right-col .col{
  border:solid 1px #ffd6d6;
}
.symbol{
  line-height:35px;
}
.row .col{
  line-height:35px;
  float:left;
  
}

.left-col{
  width:250px;
  float:left;
  margin-top: -36px; /* This is added */
}
.right-col{
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; 
  margin-top: 36px; /* This is added */
}
.head{
  line-height:35px;
  font-weight:bold;
  position:fixed;
  background:white;
  top:0;
}
body{
  margin:0;
}
.right-col .row .col{
  width:250px;
  display: inline-block;
  float:none;
}

<div class="wrap">
  <div class="left-col">
    <div class="symbol col" style="height:52px;font-weight:bold">Symbol fixed</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
    <div class="symbol col">EURUSD</div>
  </div>
  <div class="right-col">
        <div class="row head">
      <div class="col">A fixed</div>
      <div class="col">B fixed</div>
      <div class="col">C fixed</div>
      <div class="col">D fixed</div>
      <div class="col">E fixed</div>
      <div class="col">F fixed</div>
      <div class="col">G fixed</div>
      <div class="col">H fixed</div>
      <div class="col">I fixed</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
      <div class="col">G</div>
      <div class="col">H</div>
      <div class="col">I</div>
    </div>
  </div>
</div>

关于html - 固定顶部div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47368344/

html - 固定顶部div

上一篇：HTML/CSS 悬停一个元素，影响两个不同的 div？

下一篇：html - 尝试在页面中心创建 4 个响应式相等框