ASPxNavBar - How to implement a table of contents with scrollable area

This example demonstrates how to implement a table of contents with the scrollable area using the ASPxNavBar control. An xml file is used as a data source here, however it is possible to do the same with any other data source.
The main idea is to add items both in ASPxNavBar and the scrollable area when you process an entry from the data source.

Once items are added, implement the function that will:
1) Determine an element that should be selected as an active item in the navbar:

[JScript]
var firstFullyVisibleIndex = 0;

$(".section").each(function(){var scrollOffset = $(document).scrollTop();var elementOffset = $(this).offset().top;if(scrollOffset < elementOffset){
        firstFullyVisibleIndex = $(this).index();returnfalse;}});

[JScript]
if(selectedSectionIndex != firstFullyVisibleIndex){
    selectedSectionIndex = firstFullyVisibleIndex;var group = navbar.GetActiveGroup();var newlySelectedItem = group.GetItem(selectedSectionIndex);
    navbar.SetSelectedItem(newlySelectedItem);}

[JScript]
$(window).scroll(function(){
    SyncNavbar();});
$().ready(function(){
    navbar.SetActiveGroup(navbar.GetGroupByName(navbar.cpActiveGroup));
    SyncNavbar();});