JSFiddle - React, Tailwind, and code Playground

by Nam CuPeo

HTML

<div class="container">
<div style='position:fixed; bottom : 5%; right :5%;'>
<p class='p1'>
Giá trị 1
</p>
<p class='p2'>
Giá trị 2
</p>
<p class='p3'>
Giá trị 3
</p>
</div>
  <div class="header">
    This is header (500x60)
  </div>
<div style="float:left;width:100%;">
  <div class="content">
    This is main content
  </div>
  <div style="float:left; width:90px;">
  <div style=" width:100%; height:100px; background:#fff; margin-bottom:10px; margin-right:10px; ">
  C (90 x 100)
  </div>
      <div class="sidebar stickya">
    Đối tượng A
  </div>
  </div>

  <div style="float:left; margin-left:10px;width:140px;">
      <div class="stickyb" style="float:left; width:140px; height:50px; background:crimson; ">
    Đối tượng B
  </div>
  </div>
</div>  
  <div style="float:left; width:240px; height:300px; background:yellow;   margin-top: 10px;">
    BL
  </div>
  <div class="footer">
    This is my footer
  </div>
</div>

CSS

.container {
  width: 500px;
  position: relative;
  float:left;
  background:#d1d1d1;
  margin-top:-8px;
}

.header {
  clear: both;
  margin-bottom: 10px;
  height: 60px;
  width:500px;
  background:lightgreen;
}

.sidebar {
  float: left;
  width: 90px;
  border: 1px solid #000000;
  box-sizing:border-box;
  margin-bottom:10px;
  height:50px;
  background:crimson;
}

.content {
  float: left;
  width: 240px;
  border: 1px solid #000000;
  height: 400px;
  box-sizing:border-box;
  margin-right:10px;
}

.footer {
  clear: both;
  float:left;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #000000;
  height: 500px;
}

JavaScript

$( document ).ready(function() {
  console.log( "document ready!" );
  var $stickya = $('.stickya');
  var $f = $('.footer');
  var a1 = $stickya.offset().top;
  var kc = 10;
  var $p1 = $('.p1');
    var $p2 = $('.p2');
      var $p3 = $('.p3');
  $(window).scroll(function(){ 
  var thanhcuon = $(window).scrollTop(); 
$p1.text($stickya.offset().top);
$p2.text(thanhcuon);
$p3.text($f.offset().top);
  });
});