Just to be clear, my goal is to be able to scroll down in my grid with the column headers still at the top of the grid as if I'm still looking at the first record, no matter how far I scroll.

I believe the fixedHeaders option is what you are looking for. Headers will be fixed is this option is set to true and only the grid data will be scrollable. It could be set as following:

//Initialize
$(".selector").igHierarchicalGrid({
    fixedHeaders : true
})}

I hope this will help you achieve your requirement.

Please let me know if you have any additional questions regarding this matter.

By design igHierarchicalGrid inherits igGrid which means that it inherits its options. This is the reason why in the documentation in the igHierarchical grid there is a section igGrid with igGrid options and there is also an igHiererachical grid section which includes options, events and methods specific for the hierarchical grid.

Regarding your code it seems fine and I made a small sample illustrating your scenario. In my side I am defining the height for the parent and child layout in order to ensure that I will have scrollbars. When scrolling both parent and child have their headers fixed and only the data is scrollable.

Please have a look at my sample and test it on your side. Whether or not it works correctly may help indicate the root cause of this matter. If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce the behavior that you are experiencing.

I hope you find my information and sample helpful.

Please feel free to contact me if you have any further questions regarding this matter.