Хитрый position: fixed

[Nushaba]

Привет. Стоит задача разобраться, реализовать нечто подобное как у яндекс-музыки: http://music.yandex.ru/

Дизайн сайта представляет 4 блока:

1. верхний - шапка 233px;

2. меню под шапкой 30px;

3. контент height:100%;

4. подвал height:50px;

Надо сделать div блок под меню сайта с фиксированным позиционированием, но что бы он прокручивался до top:0px; и в топе фиксировался при дальнейшей прокрутке (position:fixed;), а в случае если страничку прокручивают обратно вверх, то меню сдвигалось с поправкой на шапку, что то вроде (position:absolute; top:233px;) Всю голову сломал, выручите, кто в теме... Не обязательно так изворачиваться, возможно есть выход альтернативный, по типу min-height, благодарен за любую идею. Вероятно есть решение на js, но я увы не силён в этом.

[Lacosta]

Привет. Покажи страницу и в каком браузере глюк такой. Вероятно где то в скрипте напортачил ты.

фф, хром,

tengritel.kz/catalog/temp/push/

[Nushaba]

фф, хром,

tengritel.kz/catalog/temp/push/

Плохой приём используешь. Тебе надо создать два стиля для этого блока, в первом положение до скрола страницы и второй стиль положения при прокрутке страницы, а в скрипте прописать просто замену одного стиля на другой. Лучшим вариантом будет ставить position: fixed для плавающего поиска, как у панельки верхней на сайте. Нечто похожее я делал вот тут:

aviaposylka.ru/index1.html

Сам скрипт здесь: aviaposylka.ru/js/fly2.js

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

Edited June 21, 2013 by Nushaba

[Lacosta]

Всё равно прыгает. На картинке написано почему.

[Nushaba]

Всё равно прыгает. На картинке написано почему.

Ну ради бога, хочешь такой дёрганый вариант, пусть останется дёрганым.

<script type="text/javascript">

	    var form-wrap = document.getElementById('form-wrap');
	    window.onscroll = function(){
			    var scroll = document.documentElement.scrollTop || document.body.scrollTop;
			    if(scroll >= 130){
					    form-wrap.style.top = scroll + 'px';
			    }else {
					    form-wrap.style.top = 180 + 'px';
			    }

	    }
</script>

Это должно работать как ты задумал.

[Lacosta]

Это должно работать как ты задумал.

Нет нет нет, я не стал заливать твой вариант.

По ссылке как был так и остался прежний.

Вчера всю ночь курил твой вариант. Он такой же дёрганый, просто потому что - при начальной загрузке судя по Файрбагу - скрипт не задаёт класс блоку(см картинку). Только после активности (прокрутки колесом или ползунком), скрипт подгружается и работает норм.

Это относится и к варианту Псиволкера и к твоему варианту.

[Nushaba]

Проверяю на своём примере, всё работает. Исправь ошибки в коде, вероятно какие то косяки с див блоками допущены у тебя, что то не закрыл. http://validator.w3.org/check?uri=http%3A%2F%2Ftengritel.kz%2Fcatalog%2Ftemp%2Fpush%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

[Lacosta]

залил, показать что да как: tengritel.kz/catalog/temp/bush/

открой файрбаг, нажми на ф5 на странице. И смотри, присвоился ли класс блоку id="form-wrap".

Во всех браузерах такая карусель. Ие, фф, хром, опера.

Проблема именно в том, что изначально не подшгружается ЖС со стилем. Только после проявления активности в виде дёрганья ползунка.