Привет всем. Задача с виду простая, перед тем как сделать думал что справлюсь минут за 5 максимум, но!!!!
Имеется сайт. Структура такая:
1) Шапка - ширина 100%, высота 90 px
2) Меню - ширина 100%, высота 40 px
3) Блок с категориями - ширина 100%, а вот высота или 0 или примерно 600px. Все дело в том, что есть кнопка "Свернуть/развернуть категории".
4) Основной контент. Ширина 100%. Внутри основная часть с margin-right 200px и абсолютно спозиционированный блок (с id "myBlock") у которого top:0, right=0.
Задача - сделать чтобы при прокрутке myBlock прилипал к экрану как только коснется верхним краем верхней части экрана пользователя (я же говорил вначале задача простая :-)).
Делаю так: (пример упростил максимально, на самом деле там стили более точно высчитываются):
var top = $("#myBlock").offset().top;
var showMyBlock = function(){
var myBlockScroll = top - $(document).scrollTop();
if(myBlockScroll < 0){
$("#myBlock").css("position","fixed");
}else{
$("#myBlock").css("position","absolute");
};
};
$(window).scroll(showMyBlock);
В принципе, свиду все нормально. Но печалька, ведь есть блок с категориями, который пользователь может развернуть в любой момент, тогда это уже будет некрасиво, мой блок будет не пойми где.
Засунул строчку
var top = $("#myBlock").offset().top;
внутрь функции, чтобы при скроле координата высчитывалась всегда, тогда после загрузки страницы и разворачивания блока категорий координата будет всегда верной.......НО!
Вот то что в итоге:
var showMyBlock = function(){
var top = $("#myBlock").offset().top;
var myBlockScroll = top - $(document).scrollTop();
if(myBlockScroll < 0){
$("#myBlock").css("position","fixed");
}else{
$("#myBlock").css("position","absolute");
};
};
$(window).scroll(showMyBlock);
Во всех браузерах блок при прокрутке скачет. Открыл Хром, Просмотр кода элемента на myBlock и замечаю при скроле:
первый раз скролю, position: fixed, дальше прокручиваю колесико мыши - position снова absolute и так до самого низа страницы значение меняются постоянно.
Уже голову сломал! Почему стили скачут если явно задано при myBlockScroll < 0 фиксированная позиция.
Вытаскиваю строку
var top = $("#myBlock").offset().top;
за функцию скрола - все ОК, но бардак при раскрытии категорий.
Сможет кто-нибудь что-нибудь посоветовать? Заранее благодарен.
