Navigation anchor not getting highlighted correctly

[KavithaBarathan]

I have a fixed navigation header with alphabets A, B, C ..etc. When I click on A it navigates(scrolls) to the div having content which starts with A and for other letter it works correspondingly If B is clicked the page scrolls to the div with content starting wiht B. When i scroll the page if the content which starts with A comes I will highlight Alaphabet A in navigaton bar. Now the problem is the navigation bar alphabet A ( and other alphabets) is not gettign highlighted when I scroll to the content which starts with A as there is a margin top given for the content div and only when the actual content(scrolling the margin top up/above the fixed navigation bar) the anchor A in global navigation is highlighting.
I think this part of code needs to be updated. I dont know how to do that
/**
* watchActive
*
* watches currently active item and updates accordingly
*/
var watchActive = function() {
var winTop = $(window).scrollTop();

        var visible = $('[data-scroll-index]').filter(function(ndx, div) {
            return winTop >= $(div).offset().top + settings.topOffset &&
            winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
        });
        var newActive = visible.first().attr('data-scroll-index');
        updateActive(newActive);
    };

Can anyone please help...