Как совместить position fixed и relative?

[Recouse]

У себя на форуме хотел закрепить менюшку главную, но как только пишу position: fixed; она сжимается и меняет местоположение. Только на ipb такая проблема. Помогите кто знает.

[Fedya]

ну вообще так и должно быть..

положение указывай (top,left,right,bottom) и ширину (width: 100%; )

[Recouse]

А может кто-то помочь с плавающим меню? Точнее реализовать это

[Fedya]

что ты называешь "плавающим меню"

[Recouse]

Fedya, ну зафиксированное меню

[Viserion]

Родительскому блоку назначать нужно relative, дочернему -- fixed с указанием парметров расположения: "top:0;" к примеру. В таком случае при прокрутке меню должно быть полностью сверху, но и будет двигаться вместе с окном.

Подсмотри код у jc-mp.com, там неплохо сделано.

[Recouse]

Viserion, ссылка на мой сайт у меня в профиле, вы посмотрите какое там расположение меню

[KitsuneSolar]

__htmlbook.ru/css/position

__htmlbook.ru/css/width

[Recouse]

, и что это мне даёт? Только понятие об этих свойствах.

[Viserion]

Так примерно?

[Recouse]

Viserion, да, но ещё чтобы меню наверх перемещалось, а не так стояло

[Viserion]

Не совсем понял. Чтобы липло к верху, когда переходит на fixed? Так реализовано в UI.X для XenForo.

[Recouse]

Чтобы липло к верху, когда переходит на fixed?

да

[Viserion]

Вот код из JQ от UI.X:

	if ( $('html').hasClass('hasHeaderFixed') ) {
		var navigationTop = $('#navigation').offset().top;
		
		$(window).scroll(function(){ 

			var windowTop = $(window).scrollTop();

			if (navigationTop < windowTop) {
				$('#header').addClass('headerSticky');
				if ($('#moderatorBar').length) {
					$('#moderatorBar').addClass('moderatorBarSticky');
				}
				if ($('#loginBar').length) {
					$('#loginBar').addClass('loginBarSticky');
				}
			}
			else {
				$('#header').removeClass('headerSticky');
				if ($('#moderatorBar').length) {
					$('#moderatorBar').removeClass('moderatorBarSticky');
				}
				if ($('#loginBar').length) {
					$('#loginBar').removeClass('loginBarSticky');
				}
			}
		});
	}

Лишнее уберите, код для HTML доступен в скриншоте. Ширина обязательна, а вот top как раз от 0 до 10 px. Попробуйте сделать и скажите, получилось ли.

[Recouse]

Viserion, я вас не понял

[Viserion]

Подключайте библиотеку jQuery, в тело вставьте вот этот код:

		var navigationTop = $('#pimary_nav').offset().top;
		
		$(window).scroll(function(){ 

			var windowTop = $(window).scrollTop();

			if (navigationTop < windowTop) {
				$('#primary_nav').addClass('headerSticky');
			}
			else {
				$('#primary_nav').removeClass('headerSticky');
			}
		});

Этот код проверяет, не ниже ли граница окна, чем объект primary_nav (собственно, Ваш навбар)

Далее, в общий стиль добавьте следующее правило:

.headerSticky {top: 35px;z-index: 20;position: fixed;width: 85%;}

Теперь отредактируйте .main-width, вписав туда position:relative;

Сохраните и попробуйте прокрутить страницу так, чтобы панельки не стало видно, она сама должна будет выскочить наверх.

[KitsuneSolar]

, и что это мне даёт? Только понятие об этих свойствах.

 

Это даёт знания, как сделать плавающее меню и с необходимой шириной.

[Recouse]

Подключайте библиотеку jQuery, в тело вставьте вот этот код:

		var navigationTop = $('#pimary_nav').offset().top;
		
		$(window).scroll(function(){ 

			var windowTop = $(window).scrollTop();

			if (navigationTop < windowTop) {
				$('#primary_nav').addClass('headerSticky');
			}
			else {
				$('#primary_nav').removeClass('headerSticky');
			}
		});

Этот код проверяет, не ниже ли граница окна, чем объект primary_nav (собственно, Ваш навбар)

Далее, в общий стиль добавьте следующее правило:

.headerSticky {top: 35px;z-index: 20;position: fixed;width: 85%;}

Теперь отредактируйте .main-width, вписав туда position:relative;

Сохраните и попробуйте прокрутить страницу так, чтобы панельки не стало видно, она сама должна будет выскочить наверх.

не получается