0

Im using native CSS and html (no jquery no js and no bootstrap). I managed to make the left column to be fixed and i put the scrollbar on top.

Now I want the top row to be fixed when scrolling down (marked in red).

enter image description here

Google spread sheet made it good: https://docs.google.com/spreadsheets/d/1Ai9kcTj5hLFKkBAx3TRFfhKMYR9MFgHAFJAC-BTgmqM/edit?usp=sharing

you can play with this: 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>
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
SexyMF
  • 10,657
  • 33
  • 102
  • 206

1 Answers1

2

First off, is there any specific reason that you are using transform: rotate(180deg)?

To "fixate" an element to the window you can use the css property position:fixed.

To do this I've added the following code: 

.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;
}

This will fixate the .head container to the top.

Please also note that I've move the order of your HTML, moving the .head row up underneath the .symbol container. Without position:fixed this will remove the need for using transform:rotate(180deg) which I can't really see the reason behind so far (?) - hence I've also deleted the transform:rotate() part.

I've also added margin-top: 36px to the .right-col to "push" this container down, to make sure that the .head element isn't placed above the first row and thereby hiding some of the content. I've also added margin-top: -36px to the .left-col to align it with the position:fixed head element.

One last thing I've done is to remove the margin of the body (which you haven't done explicitly and hence is added automatically from the browser). Otherwise the top:0 would leave a gap between the left-hand row and the top of the window.

The example can be seen here: 

.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>
Chri.s
  • 1,386
  • 1
  • 12
  • 23
  • Thanks. while im reading, 2 thinkgs. the reason i made the flip is because i want to scrol bars tp be on top of the page. Please also note that the top left col should be fixed as well. (Symbol fixed). thanks again. – SexyMF Nov 18 '17 at 17:12
  • Aha! Well that makes it a bit more tough since the `transform:rotateX()` creates a new stacking layer in which the `position:fixed`-elemnt now is fixed to instead. Furthermore, as far as I know, making the `.head` element fixed removes the possibility to scroll it by scrolling the `.right-col` element without the use of javascript. This is because, as the `fixed` attribute suggest, it's fixated to the window and hence follows the movement, maintaining it's initial position. – Chri.s Nov 18 '17 at 17:49
  • You can read more about the stacking order "issue" here: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children]and view an example of the "scroll issue" here: https://jsfiddle.net/mj2gze9h/4/ – Chri.s Nov 18 '17 at 17:53