Question

我使用原生CSS和html（没有jquery没有js和没有bootstrap）。我设法将左列固定，然后将滚动条放在顶部。

现在我希望在向下滚动时标记顶行（标记为红色）。

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

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

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

Answer 1

首先，您使用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()部分。

我还向margin-top: 36px添加了.right-col以“向下”推送此容器，以确保.head元素未放置在第一行之上，从而隐藏一些内容。我还在margin-top: -36px添加了.left-col，以便将其与position:fixed头元素对齐。

我做的最后一件事是删除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>

使顶部div固定

1 个答案: