Edit in JSFiddle

    var rowCount = 300000;
    var rowHeight = 20;
    var dataArr = [];
    var displayArr = [];
    var colObj = {};

    var row_id = "val1";
    var currentScrollPosition = 0;
    var startIndex = 0;
    var endIndex = 0;
    var rowsPerPage = 0;
    var rowExtra = 2;
    var windowHeight = 0;


    var headerArray = [
        {object_id:1,label:"",map:"val1",width:40,class:"rowColPrime",order:1,display:true},
        {object_id:2,label:"A",map:"val2",width:150,class:"",order:21,display:true},
        {object_id:3,label:"B",map:"val3",width:150,class:"",order:3,display:true},
        {object_id:4,label:"C",map:"val4",width:150,class:"",order:4,display:true},
        {object_id:5,label:"D",map:"val5",width:150,class:"",order:5,display:true},
        {object_id:6,label:"E",map:"val6",width:150,class:"",order:6,display:true},
        {object_id:7,label:"F",map:"val7",width:150,class:"",order:7,display:true},
        {object_id:8,label:"G",map:"val8",width:150,class:"",order:8,display:true},
        {object_id:9,label:"H",map:"val9",width:150,class:"",order:9,display:true},
        {object_id:10,label:"I",map:"val10",width:150,class:"",order:10,display:true},
        {object_id:11,label:"J",map:"val11",width:40,class:"",order:11,display:true},
        {object_id:12,label:"K",map:"val12",width:150,class:"",order:12,display:true},
        {object_id:13,label:"L",map:"val13",width:150,class:"",order:13,display:true},
        {object_id:14,label:"M",map:"val14",width:150,class:"",order:14,display:true},
        {object_id:15,label:"N",map:"val15",width:150,class:"",order:15,display:true},
        {object_id:16,label:"O",map:"val16",width:150,class:"",order:16,display:true},
        {object_id:17,label:"P",map:"val17",width:150,class:"",order:17,display:true},
        {object_id:18,label:"Q",map:"val18",width:150,class:"",order:18,display:true},
        {object_id:20,label:"R",map:"val19",width:150,class:"",order:19,display:true},
        {object_id:21,label:"S",map:"val20",width:150,class:"",order:20,display:true},
    ];


    function sortArray(_array,_property){
        headerArray = _.sortBy( headerArray, 'order' );
    }


    $('.header').on( "click", function() {
    })


    $(document.body).on('click', '.rowColPrime' ,function(){
        removeClass('rowColPrimeer');
        removeClass('selectedRow');
        $(this).addClass('rowColPrimeer');
        var rowObj = $(this).parent();
        //addClass(rowObj,'selectedRow');
        console.log(dataArr);
        rowObj.addClass('selectedRow');
        //console.log("rowObj ",rowObj.attr('rowObj'));
        var row_id = parseInt(rowObj.attr('rowObj'));
        console.log(row_id)
        var curDataRow = _.find(dataArr, {'object_id':row_id});
        console.log(curDataRow)
        curDataRow.class="selectedRow";


    })


    $(document.body).on('click', '.headerCol' ,function(){
        var colObj = parseInt($(this).attr('colObj'));console.log("colObj ", colObj)
        var curDataCol = _.find(headerArray, {'object_id':colObj});
        curDataCol.class="selectedCol";
        buildHeaderDom()
        upDate()
    })



    function removeClass(_class){
        $('.'+_class).removeClass(_class)
    }


    function addClass(_class,_class_added){
        $('.'+_class).addClass(_class_added)
    }


    function buildHeaderDom(){
        var $headerRow  = $('#headerRow');
        $headerRow.empty();
        $.each(headerArray, function( index, value ) {
            var col = $("<div colObj="+value.object_id+"  class='headerCol "+value.class+"'>"+value.label+"</div>");
            col.css('width',value.width);
            $headerRow.append(col)
        })

    }


    $( window ).scroll(function() {
        currentScrollPosition = window.scrollY;
        ////console.log("currentScrollPosition: " , currentScrollPosition)
        upDate();
    });


/////////////////////// FUNCTION : upDate()
/////////////////////// handles all updates to ui components


    function upDate(){
        setGridPosition();
        startIndex =   Math.round(currentScrollPosition / rowHeight);
        endIndex = startIndex + rowsPerPage;
        setRows();
    }





/////////////////// FUNCTION: setGridPosition()
// ////////////////handles setting the Grid position

    function setGridPosition(){
        console.log("startIndex: " , startIndex);
        var totalHeight = dataArr.length * rowHeight;
        $('#bottomPadder').height( totalHeight + 30  );
    }


/////////////////// FUNCTION: setRows()
// ////////////////handles setting the Grid position

        function setRows(){
            $('#tableHolder').html("");
            displayArr = dataArr.slice(startIndex,endIndex);
            ////console.log("displayArr: " , displayArr);


            $.each(displayArr, function( index, value ) {
                attachRow(value)
            });
        }

        function getData() {
        
        
        
            for (var i = 0; i < rowCount; i++) {
                var copiedObject = {};
                $.extend(copiedObject, colObj);
                copiedObject.height = 30;
                copiedObject.val1 = i;
                copiedObject.object_id = i;
                copiedObject.val2 = randomText();
                copiedObject.val3 = randomNumber(-100000000,100000000);
                copiedObject.val4 = randomNumber(1,10);
                copiedObject.val5 = randomNumber(-10000,10000);
                copiedObject.val6 = randomText();
                copiedObject.val7 = randomNumber(-10000,10000);
                copiedObject.val8 = i;
                copiedObject.val9 = randomText();
                copiedObject.val10 = randomNumber(-10000,10000);
                copiedObject.val11 = randomText();
                copiedObject.val12 = randomText();
                copiedObject.val13 = randomText();
                dataArr.push(copiedObject);
                
               
                
                
            }
           
            return true;
        }


    function attachRow(_obj){
        var domRow = buildDom(_obj);
        $('#tableHolder').append(domRow);
    }



     function buildDom(_object){
         var row = $('<div  rowObj="'+_object[row_id]+'" class="divRow '+_object.class+'"></div>')
         $.each( headerArray , function( key, value ) {
             var col = $('<div class="divCol '+value.class+ ' ' +value.map+'"><div>'+_object[value.map]+'</div></div>')
             col.css('width',value.width+'px')
             row.append(col);
         });
         return row;
     }




    function setUp(){
        buildHeaderDom(); //BILUD HEADER ROW
        getData(); //BUILD ARRAY OF OBJECTS
        windowHeight = $(window).height()
        rowsPerPage = Math.round((windowHeight / rowHeight) + rowExtra);
 				currentScrollPosition = window.scrollY;
        upDate();
        
    }

    setUp();


    $( ".divCol" ).click(function() {
        ////console.log(this)
    });

    function randomNumber(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }


    function randomText(){
        var r_text = new Array ();
        r_text[0] = "JavaScript";
        r_text[1] = "Angular";
        r_text[2] = "Java";
        r_text[3] = "Node JS";
        r_text[4] = "Php";
        r_text[5] = "Spring";
        r_text[6] = "NoSQL";
        var i = Math.floor(7*Math.random())
        return r_text[i]
    }
    body{
         margin:0;
         padding:0;
     }

     .headerRow{
         height:30px;
         background-color:#f3f3f3;
         width:2800px;
         position: fixed;
         top:0px;
         left:0px;
         border-bottom:1px solid #cccccc;
         margin-bottom: 1px;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-size:11px;
     }



     .divRow{
         height:20px;
         background-color:#ffffff;
         border-bottom:1px solid #cccccc;
         width:2800px;
     }






     .selectedCol{
         background-color:#ecf3ff;
         border-right:1px solid #4285f4 !important;
     }



     .selectedRow{
         background-color:#ecf3ff;
         border-bottom:1px solid #4285f4 !important;
     }


     .headerCol{
         height:30px;
         border-right:1px solid #cccccc;
         width:100px;
         float:left;
         overflow:hidden;
         text-align:center;
         line-height:30px;
     }

     .headerCol:hover {
        background-color:#ccc !important;
      }

     .divCol{
         height:20px;
         border-right:1px solid #cccccc;
         width:100px;
         float:left;
         overflow:hidden;
     }

     



     .rowColPrime{
         background-color:#f3f3f3;
         text-align:center;
     }


     .rowColPrimeer{
         background-color:#dddddd;
     }




     .divCol-1st:hover{
         background-color:#333333;
     }



     .divCol > div{
     margin:5px;

     }


     .table{
         position:fixed;
         top:30px;
         left:0px;
         overflow:visible;
         width:2800px;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-size:11px;

     }


.divRow:hover{
  background-color:#ccc;
}

.divRow:hover .rowColPrime {
  background-color:#ccc !important;
}



     .toolbar{
         position:fixed;
         top:0px;
         left:0px;
         height:56px;
         background-color:#f2f2f2;
         border-bottom:1px solid #d1d1d1;
         width:2800px;
     }




     .toolbar .toolRow{
         position:fixed;
         top:0px;
         left:0px;
         height:56px;
         background-color:#f2f2f2;
         border-bottom:1px solid #d1d1d1;
         width:100%;
     }


     .toolbar .functionBar{
         position:fixed;
         top:0px;
         left:0px;
         height:56px;
         background-color:#f2f2f2;
         border-bottom:1px solid #d1d1d1;
     }
<div class="toolbar">
    <div class="toolRow"></div>
    <div class="functionBar"></div>
</div>
<div id="headerRow" class="headerRow"></div>
<div class="table" id="tableHolder"></div>
<div id="bottomPadder"></div>