Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.01.2014, 13:10
Аспирант
Отправить личное сообщение для Lion_astana Посмотреть профиль Найти все сообщения от Lion_astana
 
Регистрация: 19.11.2010
Сообщений: 48

offset внутри scroll не хочет работать...
Привет всем. Задача с виду простая, перед тем как сделать думал что справлюсь минут за 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;
за функцию скрола - все ОК, но бардак при раскрытии категорий.

Сможет кто-нибудь что-нибудь посоветовать? Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 19.01.2014, 17:50
Аспирант
Отправить личное сообщение для Lion_astana Посмотреть профиль Найти все сообщения от Lion_astana
 
Регистрация: 19.11.2010
Сообщений: 48

Всё, разобрался!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не хочет работать скрипт Alven Общие вопросы Javascript 0 20.09.2013 21:26
Нежадный поиск не хочет работать в String.match() Почемучкин Общие вопросы Javascript 3 23.08.2013 22:15
Скрипт не хочет работать как надо в Хроме AlexZ Javascript под браузер 1 11.05.2012 11:34
не хочет работать слайдер картинок на сайте MadStill Общие вопросы Javascript 0 29.03.2011 14:55
Сломал всю голову.. Посмотрите спецы.. Не хочет работать страница в mozilla-firefox.. ProniK Ваши сайты и скрипты 1 02.06.2010 19:33