JavaScript - Chrome и Opera не верно видят разметку во время прокрутки после перезагр
 

Здравствуй спаситель о! вот сайт http://bolshoi-medved.ru Хедер-Фиксированное меню по мере передвижения scroll должно менять цвет по мере достижения элемента со значением id, что и происходит на локалке, IE и Firefox работает как надо. Но в Chrome и Opera слетает после перезагрузки страницы и цвета меняются не достигнув очередного события при прокрутке id=page. Не могу понять в чем тут дело, helppp!!!!!
такой скрипт

$(document).ready(function(){
				!function(){
			var map=[]
			 ,names=[]
			 ,win=$(window)
			 ,header=$('header')
			 ,currClass
			$('.content').each(function(n){
			 map[n]=this.offsetTop
			 names[n]=$(this).attr('id')
			})
			
                            win
			 .on('scroll',function(){
				var i=0
				while(map[i++]<=win.scrollTop());
				if(currClass!==names[i-2])
				currClass=names[i-2]
				header.removeAttr("class").addClass(names[i-2])
			 })


 			 
			}(); });

какие мысли: 1) возможно влияет движок WebKit?
2)Сбивается алгоритм сценария? но ведь хедер1 сменяет хедер2 и тд....хотя на мониторе пйдж1
3) косяк в переменных? как же тогда Firefox разобрался...

но при этом при нажатии пунктов меню переход происходит куда надо
 

например: хром и опера при вызове скрипта думают что мы в разделе контакты, и поэтому цвет меню синий, как задано в стилях для страницы контактов ,а должен быть розовый

но при этом при нажатии пунктов меню переход происходит куда надо, вот так:

function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
$(document).ready(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});