test

test2

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
  <div id="left">
    <div id="bin">

    </div>
  </div>
  <div class="rightc">


    <div id="right">

      <div id="item">

      </div>

    </div>
  </div>
</body>

CSS

#left {
      border: 2px solid black;
      position: fixed;
      width: 49%;
      height: 98%;
      overflow: auto;
    }
    
    .rightc {
      position: fixed;
      left: 52%;
      top: 2%;
      width: 46%;
      height: 20%;
      overflow: scroll;
      border: 2px solid black;
    }
    
    #bin {
      border: 2px solid black;
      position: relative;
      left: 12%;
      top: 5%;
      width: 75%;
      height: 75%;
    }
    
    .item {
      border: 2px solid black;
      left: 55%;
      top: 5%;
      width: 15%;
      height: 5%;
      position: fixed !important;
    }
    
    #right {}

JavaScript

function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++) {
       color += letters[Math.floor(Math.random() * 16)];
     }
     return color;
   }

   $(function() {
     start = 20;
     for (var i = 1; i <= 100; i++) {
       $('#right').append($('<div></div>')
         .addClass('item')
         .css('top', 'calc(5% + ' + i + '.75em)')
         .css('background', getRandomColor()) //change background color so you can see it.
         .css('z-index', start ) //set z-index.
         .attr('corez', start + i) //make an unalterable attribute so we can always reset it.
         .html(i));

     }
     lastindex = start + i; // Need lastindex so we can apply it later.
     //Handle the scroll event.
     $('.rightc').scroll(function(d) {
       distance = $(this).scrollTop();
       $('.item').each(function() {
         if($(this).hasClass('dropped')) return true; //Skipped dropped elements
         index = $(this).attr('corez') - start; // Get the index from the corez attribute
         itop = 'calc((5% + ' + index + '.75em)' + ' - ' + distance + 'px)'; //Push it up or down according to our scroll distance.

         $(this).css('top', itop);
         //Since we're using 2 containers to get the scroll ability, we need parent.parent
         ptop = $(this).parent().parent().position().top;
         pbot = $(this).parent().parent().position().top + $(this).parent().parent().height();
         if ($(this).position().top < ptop) {//Check top
           $(this).css('visibility', 'hidden'); //Use visibility here, as display none will break the position check
         } else {
           if ($(this).position().top + $(this).height() > pbot) { //Check bottom
             $(this).css('visibility', 'hidden');//Use visibility here, as display none will break the position check
           } else {
             $(this).css('visibility', 'visible');//Use visibility here, as display none will break the...