Большое вам спасибо за вашу помощь, я уже сделал, вот рабочий код.
$(document).ready(function() {
//Bootstraping variable
headerWrapper = parseInt($('#gk-top').height());
offsetTolerance = 40;
pointer = $('.pointer');
firstNav = $('.menu a:first').parent('li');
defaultPointer = firstNav.offset().left;
//Move pointer to the first menu
pointer.css('left', defaultPointer);
firstNav.addClass('selected');
//Detecting user's scroll
$(window).scroll(function() {
//Check scroll position
scrollPosition = parseInt($(this).scrollTop());
//Move trough each menu and check its position with scroll position then move the pointer
$('.menu a').each(function() {
thisHref = $(this).attr('href');
thisTruePosition = parseInt($(thisHref).offset().top);
thisPosition = thisTruePosition - headerWrapper - offsetTolerance;
thisNav = $('.menu a[href='+ thisHref +']').parent('li');
currentPosition = parseInt(thisNav.offset().left);
if(scrollPosition >= thisPosition) {
$('.selected').removeClass('selected');
pointer.stop().animate({'left': currentPosition});
thisNav.addClass('selected');
}
});
//If we're at the bottom of the page, move pointer to the last section
bottomPage = parseInt($(document).height()) - parseInt($(window).height());
lastNav = $('.menu a:last').parent('li');
currentPosition = lastNav.offset().left;
if(scrollPosition == bottomPage || scrollPosition >= bottomPage) {
$('.selected').removeClass('selected');
pointer.stop().animate({'left': currentPosition});
lastNav.addClass('selected');
}
});
});
У меня теперь другая проблема, как переделать код, что бы при скроле менялась ссылка в строке браузера как вот здесь
http://www.coffeemilk.ru/#agency, и еще как можно заставить активную кнопку так же как здесь
http://elemisdesign.com/demos/menu/ плавно ездить?