JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="header">
  <p>hello there. I'm a header</p>
</div>
<div class="wrapper">
  <div class="left">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
  <div class="middle">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
    </ul>
  </div>
  <div class="right"></div>
</div>
<div class="footer">
  <p>hello there. I'm a footer</p>
</div>

CSS

.wrapper{
  position: relative;
  display: flex;
}

.wrapper > div {
  flex: 1 1 auto;
}

.left{
  position: absolute;
  bottom: 0;
  background: green;
  width: 25%;
  height: 80vh;
  overflow-y: scroll;
}

.middle {
  flex: 2 1 auto;
  background: yellow;
  margin-left: 25%;
}

.right {
  flex: 1 1 auto;
  background: gray;
}

.sticked-to-bottom{
  bottom: 0;
  left: 0;
}

.fixed-to-top{
  top: 0;
  left: 0;
  height: 100vh;
}

JavaScript

const setStickyIfNeeded = (...args) => {
	console.log('args are: '/* , ...args */);
  requestAnimationFrame(setStickyIfNeeded);
};

const listener = (e) => {
  
	console.log('run');
};

window.addEventListener('scroll', listener);