Перемещение дива во время скролинга страницы
1. Валерий (19.10.2011 / 20:09)Хочу сделать одну фишку. Такая фишка сейчас есть на яндексе.
Заходим на http://yandex.ru с компа. Вводим любую фразу в поиск.
Поле ввода находится как обычно, но начинаем скролить страницу и видим, что поле поиска фиксируется вверху страницы и всегда на виду.
Вот типа такой фишки мне надо, но вместо поля будет обычный див.
<div>содержание</div>
Вот хочу, чтоб при скролинге, этот див не уходил из видимости..
У кого есть идеи?
Добавлено через 01:33 сек.
Я бы наверное сам смог сделать, если бы знал какое действие в javascript отвечает за скролинг.. Ну типа за нажатие на элемент отвечает onclick, а за скролинг страницы?
2. ramzes (19.10.2011 / 20:13)
<div style="position: fixed; top:0;">text</div>
3. Валерий (19.10.2011 / 20:14)
это немного не то.. На яндексе изначально див находится не вверху страницы.. Вверх он встаёт и фиксируется только при скроллинге.. А если отскролить обратно, то он встаёт на прежнее место.
4. Валерий (19.10.2011 / 20:26)
Нашёл событие отвечающее за скроллинг. Это scroll
$(window).bind("scroll",function(){
alert(5);
});
Щас наверное напишу себе эту фишку.
5. Дмитрий (19.10.2011 / 20:31)
2. ramzes, нет, Рома, там аякс. Надо просчитать положение блока на странице с учетом количества пикселов скроллинга, и если они 0 или меньше - закреплять блок (приклеивать к верху), меняя значения css как ты написал выше, и параллельно пряча ненужные ссылки вокруг. Если же вернулись назад к верху (кол-во скроллинга 0), возвращать блоку position:relative и открывать скрытые ссылки.
Я вижу это так.
6. ramzes (19.10.2011 / 20:38)
5. dima.london, jquery там, ajax вообще для другого нужен))
я знаю что там. 3 строчки кода просто css куда легче для браузера
http://wap.smartoff.net/user/files/1/ 30 секунд, кто быстрее?))
7. Валерий (19.10.2011 / 20:41)
ramzeshttp://wap.smartoff.net/user/files/1/ 30 секунд, кто быстрее?))Чё она у тебя ездит туда сюда?
8. ramzes (19.10.2011 / 20:44)
7. valerik, она догоняет экран)) мне так больше нравится, можно без эффекта сделать
9. Дмитрий (19.10.2011 / 20:47)
8. ramzes, не понял прикола че-то
10. ramzes (19.10.2011 / 20:49)
9. dima.london, в смысле?
кстати, вот css яндекса
.b-head-floater_fixed_yes .b-head-search {
position: fixed;
top: 0;
}
без этого не работает у них))
Добавлено через 05:51 сек.
$(window).bind("scroll",function(){
if(pageYOffset != $("#full-header").css("top")){
// $("#full-header").animate({top: pageYOffset-1+"px"}, 100);
$("#full-header").css({top: pageYOffset-1+"px"});
}
}
full-header это ид фиксированного блока
11. Валерий (19.10.2011 / 21:53)
Всё сделал. Не могу не похвастаться, не сочтите за рекламу.
Код замудрил сложный.. jquery
//Навигация при скроллинге
$('#head_tabs').css('top', '55');
var header_def_top = 55;
var header_def_back =$('#tabs').css('background-image');
var header_def_col =$('#tabs').css('background-color');
$(window).bind("scroll",function(){
if(document.documentElement.scrollTop > header_def_top+70)
{
$('#head_tabs').css('position', 'fixed');
$('#after_head').css('margin-top', '145px');
$('#tabs').css('margin-top', '0px');
$('#head_tabs').css('top','0px');
$('#head_tabs').css('opacity','0.3');
$('#tabs').css('background-image','none');
$('#tabs').css('background-color','inherit');
}
else
{
$('#head_tabs').css('position', 'static');
$('#after_head').css('margin-top', '0px');
$('#tabs').css('margin-top', '70px');
$('#head_tabs').css('top',header_def_top);
$('#head_tabs').css('opacity','1');
$('#tabs').css('background-image',header_def_back);
$('#tabs').css('background-color',header_def_col);
}
});
$('#head_tabs').hover(function(){$('#head_tabs').css('opacity','1');});
$('#head_tabs').mouseleave(function(){if(document.documentElement.scrollTop > header_def_top+70){$('#head_tabs').css('opacity','0.3');}});
//-------------------------
12. Дмитрий (19.10.2011 / 21:57)
11. valerik, зачем так много индийского кода
13. Валерий (19.10.2011 / 21:59)
да чёто разметка слетала после $('#head_tabs').css('position', 'fixed');
пришлось всё это городить.. позиции выставлять.. всякие соседнии элементы тоже..
Кроме того я сделал всякие фишки.. типа прозрачности..
и при наведении снова в полную видимость.
14. ramzes (19.10.2011 / 22:04)
13. valerik, а чем хвалишься то? не заметил там фиксированных блоков вообще
Добавлено через 02:30 сек.
$('#head_tabs').hover(function(){$('#head_tabs').css('opacity','1');});
$('#head_tabs').mouseleave(function(){if(document.documentElement.scrollTop > header_def_top+70){$('#head_tabs').css('opacity','0.3');}});
hover() имеет две части, начало и конец
$("id").hover(function(){
наведение
},
function(){
отведение
});
15. Валерий (19.10.2011 / 22:09)
ramzes (20 Октября 2011 / 00:04)Чёто с хрома не пашет
13. valerik, а чем хвалишься то? не заметил там фиксированных блоков вообще
С других браузеров норм
$("id").hover(function(){А вот за это спасибо, не знал
наведение
},
function(){
отведение
});
16. ramzes (19.10.2011 / 22:12)
15. valerik, у тебя там вообще много странного)) там реально 3-5 строк простейшего кода
я выше пример писал
Добавлено через 01:52 сек.
valerik (19 Октября 2011 / 21:59)fixed как и absolute позиционируется не влияя на другие элементы (для них, просто нет этих блоков
да чёто разметка слетала после $('#head_tabs').css('position', 'fixed');
17. Валерий (19.10.2011 / 22:17)
ramzes (20 Октября 2011 / 00:12)В этом и проблема.. Изначально небыло никаких fixed и всё было ок, но после fixed, этот блок как бы убирается из разметки..
fixed как и absolute позиционируется не влияя на другие элементы (для них, просто нет этих блоков
Вот пришлось выправлять. А в случае если javascript не включён, мне этот fixed не нужен, поэтому включаю я его скриптом.. короче это решение чисто для моей разметки. Уверен, что можно и проще.
18. ramzes (19.10.2011 / 22:21)
$('#head_tabs').css('position', 'fixed');
а разве не проще сделать вот так
$('#head_tabs').css({position:'fixed', top: '0px', opacity: '0.3'});
19. Валерий (19.10.2011 / 22:27)
Угу, поправил..
URL: https://visavi.net/topics/25781