SharePoint 2010 jQuery: List Scrolling View with Frozen Header

Problem:

Many times SharePoint List has huge amount of records (Number of items) and it’s hard to scroll out the view. Also while scrolling the page we cannot determine which information is from which column.

Solution:

By simple applying CSS we can achieve the Frozen Headers like Excel Sheet. And for achieving the same we use JQuery.

Implementation: 

1. Go to List View Page and Html Form Webpart on the same page.

2. Copy Following code in Html Form Webpart. Just replace the LISTID and VIEWID (Highlighted in yellow color).

<script type="text/javascript" src="/Style Library/jq.Smoothness/js/jquery-1.5.1.min.js"></script> <style type="text/css"> <!-- .DataGridFixedHeader { position: relative; top: expression (this.offsetParent.scrollTop); background-color: gray;} --> </style> <script type="text/javascript"> $(function(){ var $table = $("TABLE[ID^='{F1D2645C-4CC3-458C-BC93-CBCFECD12171}-{5AB46E0C-D38F-4FF2-BBE0-0D485CC351E9}']:first","#MSO_ContentTable"); <!--WRAP TABLE IN SCROLL PANE--> $table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: " + (screen.height-400) + "px'></DIV>"); <!--FROZEN HEADER ROW--> $("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader"); }); </script>

Note:
For IE8 and IE9 browsers, require change in CSS class .DataGridFixedHeader  as follows.
 position: absolute;

Output: