fixing column headers while scrolling - jqgrid

Question

If my grid data scrolls over the current window, is it possible to freeze the column headers while scrolling the data so that column headers are always visible(like in excel). I

Answer 1

If the grid is top-most element on the page then the usage of position: fixed can be helpful. The code could be about the following

var $hdiv = $($grid[0].grid.hDiv),
    hOffset = $hdiv.offset(),
    $cdiv = $($grid[0].grid.cDiv),
    cOffset = $cdiv.offset(),
    $bdiv = $($grid[0].grid.bDiv);
// change gbox position
$bdiv.parent().parent().css({
    position: "relative",
    top: $bdiv.offset().top,
    left: 0});
// make header and capture fixed
$hdiv.css({
    position: "fixed",
    zIndex: 1,
    top: hOffset.top - cOffset.top,
    left: hOffset.left
});
$cdiv.css({
    position: "fixed",
    zIndex: 1,
    top: 0,
    left: cOffset.left,
    width: $cdiv.width()
});

See the demo.