Как реализовать скролинг по горизонатли в блоке position: fixed?

Question

[vohaha]

min-width страницы 960px. Хедер - fixed, в нем лого и навигация. При уменьшении ширины браузера до размеров когда лого и навигация не помещаются, блок с навигацией или "спрыгивает" вниз, или остается на месте, но правая часть (которая вне окна браузера) не доступна при гориз. скролинге страницы. Нужно что бы хедер оставался фиксированным при вертикальном скролинге, но при гориз. можно было просматривать блоки которые не поместились в ширину. position: fixed-y; так сказать.

Answer 1

[Станислав]

У меня тоже идентичная проблема, конечно не критично, но все же, имеем jsfiddle.net/js77amsp

В итоге при горизонтальном скроле не видно блока right

Крутил вертел, решил только с помощью отслеживания отступа скролла с левой стороны окна браузера и соответственно применением отрицательного margin-left блоку.

Вот сама реализация:

window.onscroll = function() {
	var scrolledX = window.pageXOffset,
		scrolledY = window.pageYOffset;
	if(scrolledX) {
		$('.header').css({
			"marginLeft":"-" + scrolledX + "px"
		});
	} else {
		$('.header').removeAttr("style");
	}
}

Answer 2

[Матвей Мамонов]

overflow: auto;

Пробовали?

Comments

[Матвей Мамонов]

А лучше даже так:

$width = $(window).width();
	if ($width < 960) {
		
		$("#header").addClass("scroll");
		
	} else {
		
		
		
	}

#header.scroll {
overflow-x: scroll;
}

[vohaha]

Да, вообще никакой реакции. Да и поидее оно же создаст скролл в самом блоке. А нужно что бы при общем скролле просматривалось. Извиняюсь, не точно все сказал.

[vohaha]

Матвей Мамонов: Необходимо использовать общий скролл для просмотра, а так выйдет что у хедера появится полоса прокрутки. Это же не хорошо :)

[Матвей Мамонов]

vohaha: По-моему, эта проблема нерешаема. Фиксированный элемент не реагирует на скроллы, это ведь понятно по его природе. Подумайте логически, если вы ему дали position: fixed;, то вы, наверняка, хотели, чтобы скролл на него не влиял и шапка постоянно оставалась видимой для пользователя. Так почему горизонтальный скроллинг на него влиять должен?

Можете попробовать обернуть содержимое шапки в еще один блок, выставить абсолютное позиционирование и работать уже со скроллом этого флемента. Не знаю, может поможет. Отпишитесь, по поводу того, какой выхлоп будет.

[Матвей Мамонов]

vohaha: Ну, хорошо или нехорошо, решает только дизайнер. Может у вас такой проект, в котором без этой полосы не обойтись вовсе?

Но это так, лирическое отступление, я сам против них.