Как сделать, чтобы fixed меню прокручивалось горизонтально вместе со страницей?

[Zverushka]

Ситуация - есть меню фиксед. Минимальная ширина страницы 1024 пикселя.

Проблема - если сузить окно браузера сильнее, то горизонательная прокрутка не будет прокручивать меню - и оно будет либо обрезанным (с минимальной шириной 1024 пикселя), либо терять начальный дизайн (с шириной 100 процентов).

Вопрос - что делать? Как сделать, чтобы оно крутилось вместо со странице горизонтально?

Edited November 27, 2013 by Zverushka

[Z1gnet]

Добрый вечер. Уже поднималась данная тема и я отвечал. http://htmlforum.ru/index.php?showtopic=46607&p=311069 вот тут посмотри. Все должно работать

[Zverushka]

Хочу тебе сказать огромное спасибо.

По-началу я не захотела вникать, так как выкрутилась деградцией меню в текущем проекте.

Зато на следующем сайт ну просто как назло задача усложнилась в 2 раза.

Сначала я попыталась поискать плагины - установила 5 штук, каждый не работал как надо. Еще сидела и долго вчитывалась в документацию, пытаясь понятЬ, где же я накосячила. Потратив час-полтора, поняла - все, хватит. Пришлось вникнуть в твой код и он меня спас!

Я написала свой маленький кодик и в связи с особенностями меню - сделала на абсолют блоках (так оказалось удобнее центрировать).

 	// зафиксировать элементы относительно страницы	 $.fn.stickTop = function() {	 	var $obj = $(this);	 	var $parent = $(this).parent();	 	var offsetTop = $parent.offset().top;	 	var top = parseInt($obj.css('top').slice(0, -2));	 		 	$(window).scroll(function(){	 		if ($(window).scrollTop() >= offsetTop) {	 			 			$obj.stop().css({		 			'top' : top + $(window).scrollTop() - offsetTop	 			});	 		}	 	});	 }

И теперь маленький вопросик в студию - почему, когда прокручиваешь страничку вертикально - 2 боковые картинки - онлайн заказ и консультацию - слегка пляшут?

zverushka.bl.ee/monitors/

Edited November 29, 2013 by Zverushka

[Zverushka]

Полная з....

Пришлось переделать под фиксед обратно, так как тряслись все эти хреновины на абсолюте.

 

Я написала рабочий код, проблема лишь в том, как инкапсулировать данные в коде?

Я когда пытаюсь 3 раза подряд инициализировать - переменные перезаписываются. 

Уже час читаю, как этого избежать и нифига не понимаю. Там какая-то чертовщина написана. Что к чему - ничего не понятно. Пробую. Не выходит. Вот код.

	// зафиксировать элементы относительно страницы	 $.fn.stickTop = function() {	 	$(this).each(function(){	 		var $obj = $(this);		 			 	$obj.css({"position": "fixed"})		 	var $parent = $(this).parent();		 	// Отступ сверху у родителя		 	var offsetTop = $parent.offset().top;		 	// Отступ сверху от ребенка до родителя		 	var startTop = parseInt($obj.css('top').slice(0, -2));		 	// Отступ слева у родителя		 	var offsetLeft = $parent.offset().left;		 	// Отступ от ребенка до родителя слева		 	var startLeft = parseInt($obj.css('left').slice(0, -2));		 	top = offsetTop + startTop;		 	left = offsetLeft + startLeft;		 	$obj.css({		 		'top' : top - $(window).scrollTop(),		 		'left': left		 	});		 	$(window).scroll(function(){		 			 			$obj.stop().css({		 			'left' : $parent.offset().left + startLeft - $(window).scrollLeft()	 			});	 			console.log(left);		 	});		 	$(window).resize(function(){		 		// Отступ слева у родителя				 				 	$obj.stop().css({		 					 		'left': $parent.offset().left + startLeft			 	});		 	});	 	});	 		 }

[Николя223]

можно рабочий пример?

[Vin]

Как-то сталкивался с подобной проблемой. Эмуляция fixed на JS тормозит. Я решил немного другим, более простым способом. Если интересно, вот моё решение: http://jsfiddle.net/villard/J7Jsy/1/

[Zverushka]

http://zverushka.bl.ee/monitors/

Так вот тут и есть рабочий пример - корзинка пришпилена, остальное пока как есть.

Если нужно - могу выложить архив..

Блок сейчас не дрыгается. На абсолютах трасся, потому что скроллл сам по себе рывком скроллит, а если транзицию добавить, то меню из-за пределов экрана выпрыгивало)...

 

Я совсем не понимаю, сделать возможность множественного запуска моего плагина. Подскажите, пожалуйста.

Edited November 29, 2013 by Zverushka

[mishka]

все не читал. Прочел заголовок темы.

Что тебе мешает повесить стилями хедер на фиксед. А джсом, при скролении, задавать хедеру отрицательное смещение влево на величину scrollLeft?

[Николя223]

Я правильно понимаю, что нужно меню фиксед и с прокруткой?

http://jsfiddle.net/nikolya223/p7wkP/

 

Извиняюсь что в таком виде. У меня на хроме jsfiddle жутка лажает - из интерфейса каша, только в одном табе работать могу и то не везде((

нужные места выделил

Edited November 29, 2013 by Николя223

[Zverushka]

Так у меня оно уже написано, 

сейчас специально заменила привязку фиксации с корзинки на меню, чтобы было видно.http://zverushka.bl.ee/monitors/

Но я не могу одновременно 3 элемента привязать - меню, корзинку и консультацию.

То есть, если я делаю такой вызов  -  они берут данные друг друга и все блоки получают неверные координаты и сваливаются в кучу

         $("#cons").stickTop();	 $("#cart").stickTop();	 $(".menu-main").stickTop(); 

А вот код самого плагина

	// зафиксировать элементы относительно страницы	 $.fn.stickTop = function() {	 	$(this).each(function(){	 		var $obj = $(this);		 	$obj.css({"position": "fixed"})		 			 	var $parent = $(this).parent();		 	// Отступ сверху у родителя		 	var offsetTop = $parent.offset().top;		 	// Отступ сверху от ребенка до родителя		 	var startTop = parseInt($obj.css('top').slice(0, -2));		 	// Отступ слева у родителя		 	var offsetLeft = $parent.offset().left;		 	// Отступ от ребенка до родителя слева		 	var startLeft = parseInt($obj.css('left').slice(0, -2));		 	top = offsetTop + startTop;		 	left = offsetLeft + startLeft;		 	$obj.css({		 		'top' : top - $(window).scrollTop(),		 		'left': left		 	});		 	$(window).scroll(function(){		 			 			$obj.stop().css({		 			'left' : $parent.offset().left + startLeft - $(window).scrollLeft()	 			});	 					 	});		 	$(window).resize(function(){		 		// Отступ слева у родителя				 				 	$obj.stop().css({		 					 		'left': $parent.offset().left + startLeft			 	});		 	});	 	});	 		 }

Edited November 29, 2013 by Zverushka

[mishka]

Я правильно понимаю, что нужно меню фиксед и с прокруткой?

http://jsfiddle.net/nikolya223/p7wkP/

 

Извиняюсь что в таком виде. У меня на хроме jsfiddle жутка лажает - из интерфейса каша, только в одном табе работать могу и то не везде((

нужные места выделил

Я так же понял. Но советую избавиться от overflow: hidden и менять маргин-лефт с отрицательным значением у фиксированного блока. Так как вдруг там выпадающее меню будет.

[Zverushka]

Обновила свой пост выше.

[mishka]

Вон Николя223 выше привел решение. Только надо проапдейтить как я ниже посоветовал.

[Zverushka]

Так, а где там плагин с множественный вызовом? Ведь мне надо так сделать с 3мя элементами - я могу конечно каждому написать отдельный код, но это не очень правильно.
И у меня немножко более хитро сделано - я позиционирую изначально от враппера, а не от окна - поэтому мне нужно узнавать оффсет враппера и оффсет элемента к врапперу.

[mishka]

ненадо никаких офсетов. Сделай элементу ширину 100% и лефт 0, минимальную ширину. В нем уже центрируй блок. И этот элемент ты будешь смещать отрицательным левым марджином на величину scrollLeft окна браузера.

Ненадо таких хитростей. Чем проще тем лучше. В данном случае.

А по поводу множественного вызова -- можешь им клас одинаковый задать. И по класу работать сразу с несколькими элементами.

 

Или вечером, если не помогут, то посмотрим более основательно.

[Zverushka]

Элемент около 1700 пикселей и его задний фон фиксирован - я не имею права растягивать его на всю ширину - поедет дизайн. При этот элемент центиррован. Мой блок должен быть слева на 70 писселей не от окна, а от этого элемента (.wrapper)  - который то прижат к окну вплотную, то находится на некотором расстоянии от него. Это, врочем видно по дизайну той странички, что там висит.

При этом, если теоретически его растянуть на 100%, то корзина должна быть тогда прижата не к левому краю окна на эн пикселей - а границе внутренней обертки и соответственно это такой же геморрой, так как при изменнии размеров окна left параметр всегда будет разным (пока не дойдет до минимальной ширины body)

 

 

А по поводу множественного вызова -- можешь им клас одинаковый задать. И по класу работать сразу с несколькими элементами.

Можно ведь множественно и так вызвать? (".el1, .el2, .el3") - но так тоже не пашет как надо... 

 

УПД. А не - такой вызов сработал. Видимо, когда я его первый раз тестила то ли баг был в скрипте, то ли .each еще не было...

Фух ну хоть временно проблема решена). Конечно бы хотелось научиться делать независимый код для нескольких вызовов, но по крайней мере уже не так горит)...

Edited November 29, 2013 by Zverushka

[Николя223]

Я так же понял. Но советую избавиться от overflow: hidden

 

нужно по другому проапдейтить)  возможно использовать overflow-x: hidden, правда нужно протестировать - не уверен что кроссбраузерно

 

Почему я скролл использовал?  да потому что при большом количестве элементов - все эти изменения марджинов и падингов у больших тел жутко лагать начинают - а со скроллами проблем нет)  на программном уровне работают и быстрее

 

 

 

Можно ведь множественно и так вызвать? (".el1, .el2, .el3") - но так тоже не пашет как надо... 

 

я это как раз хотел предложить, когда с работы ехал)   почему не пашет? я считаю - что вам просто отдохнуть нужно и решение придёт (я че то так до сих пор не вкурил что вы хотите сделать)... Мне кажется решения есть в сто раз по проще... но у меня времени сейчас нет, так бы допилил ваш вариант 

Edited November 29, 2013 by Николя223

[ryter]

https://github.com/filamentgroup/fixed-sticky может вам это подойдет