Reputation: 11185

make the top div fixed

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

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>

Upvotes: 0

Answers (1)

Chri.s

Reputation: 1456

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>

Upvotes: 2

make the top div fixed

Answers (1)

Related Questions