Фиксированный элемент и скроллинг до якоря
Здравствуйте.
На сайте имеется меню. При прокрутке и достижении им верхней границы окна, оно фиксируется: $(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 пикселей и часть контента скрыта меню. В дальнейшем высота меню учитывается и скроллится все идеально. Подскажите пожалуйста в чем проблема и как ее решить. |
spo,
Возможно неполное разворачивание контента на первом входе, если есть картинки и фреймы Попробуйте обрамить $(document).ready(function(){ $(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' }); } }); }); |
Не помогло.
|
Вопрос решен.
Проблема заключалась в том, что при скроллинге, когда меню фиксировалось, оно выпадало из общего потока и весь контент смещался вверх Нужно было просто поместить меню в контейнер которому задать фиксированную высоту. |
Часовой пояс GMT +3, время: 06:22. |