Здравствуйте.
На сайте имеется меню. При прокрутке и достижении им верхней границы окна, оно фиксируется:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 349){
$('div.wrapper-menu').addClass("up").css({
position: 'fixed'
});
}
if (scrollTop < 349){
$('div.wrapper-menu').removeClass("up").css({
position: 'relative'
});
}
});
Ссылки меню ссылаются на якоря в документе и скроллятся следующим скриптом:
$("div.menu a").click(function () {
elementClick = $(this).attr("href");
destination = $(elementClick).offset().top-40;
if($.browser.safari){
$('body').animate( { scrollTop: destination }, 1100 );
} else {
$('html').animate( { scrollTop: destination }, 1100 );
}
return false;
});
В данном скрипте на третей строке я отнял 40 пикселей - это высота меню.
Проблема заключается в следующем: при первом клике скроллинг осуществляется без учета этих 40 пикселей и часть контента скрыта меню. В дальнейшем высота меню учитывается и скроллится все идеально.
Подскажите пожалуйста в чем проблема и как ее решить.