Как остановить блок при скролле?

Question

[chernyavskiy94]

HTML:

<div class="left-menu">						
	<ul>
		<li><a href="#liv">Ливарол</a></li>
		<li><a href="#mol">о молочнице</a></li>
		<li><a href="#pros" class="l-menu-last">просто о сложном</a></li>
	</ul>		
</div>

CSS:

.left-menu{
	width:150px;
	background:rgba(255,255,255, 0.3);
	padding-bottom:20000px;
	margin-bottom:-20000px;
	position:fixed;
	top:88px;
	z-index:10;
}

Фиксированное меню, при скролле в самый низ за лазит на футер.
Как мне его остановить до футера на jQuery.
Например, чтоб последний элемент списка останавливался на 20px выше чем футер.
Подскажите пожалуйста, буду очень признателен.

Answer 1

[Евгений Петров]

position:fixed означает, что контейнером является область просмотра. Это значит, что никакой футер не может повлиять на размеры такого элемента и на его положение. Только вы сами в стилях непосредственно в CSS, либо с помощью JS записав вычисленные значения правил CSS.

А это вообще зачем?

margin-bottom:-20000px;
position:fixed;

Comments

[Евгений Петров]

@chernyavskiy94 знаете, как я люблю писать сам себе? Просто обожаю:) Вы тоже пишите, как и я, но только не себе, а мне. Вот сюда, в мой ответ.

Про ширину и нижние отступы — это шутка? Тут пришла пора глянуть на цель вашего творения либо в виде макета, либо уже написанного вами кода.

[chernyavskiy94]

Вот:) fb38090k.bget.ru/livarol

[Евгений Петров]

@chernyavskiy94
1. Стоит указать примерно это:

position:fixed;
	z-index:10;
	top:88px;
	bottom:0;
	width:150px;
	background:rgba(255, 255, 255, .3);

2. Я бы определил позицию футера (его положение относительно документа — offset() вам в помощь или getBoundingClientRect() + document.documentElement.scrollTop из нативного JS) и высоту окна — document.documentElement.clientHeight или innerHeight() (тут нужно уточнить — как в jQuery не помню).

3. Ловим scroll на окне (это событие такое) и смотреть на разницу положение футера и высоты прокрученного контента. Как только она меньше высоты области просмотра, меняем bottom для меню на эту величину (только положительную).

[Евгений Петров]

@chernyavskiy94 примерно вот так jsfiddle.net/petroveg/axvz84ry

[Евгений Петров]

@chernyavskiy94 или даже так (покороче) jsfiddle.net/petroveg/axvz84ry/1

[chernyavskiy94]

Спасибо огромное! Буду разбираться в скрипте, чтоб не спрашивать больше подобные вещи :)

[Sergiu Mitu]

@Petroveg и от меня спасибо что не поленились и так красиво все разъяснили, чувствую мне это тоже понадобиться.

[chernyavskiy94]

padding-bottom:20000px;
margin-bottom:-20000px;

Немного перепутал... не ширину, а на всю высоту :)

[Евгений Петров]

@chernyavskiy94 да уберите вы это и не вспоминайте:) Не нужны они вам, эти грязные хаки ненужные, мать их так.

Answer 2

[chernyavskiy94]

Если бы я, что-то понял из ваших слов... :) Но спасибо за отклик.
Это для того, чтоб растянуть блок на всю ширину:
padding-bottom:20000px;
margin-bottom:-20000px;

Comments

[Alexander Lashchevsky]

А хостинг Вы хороший выбрали.

[chernyavskiy94]

Спасибо, если это не сарказм )