Перемещение дива во время скролинга страницы

Всё сделал. Не могу не похвастаться, не сочтите за рекламу.

Код замудрил сложный.. 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');}});
    //-------------------------

11. valerik, зачем так много индийского кода

да чёто разметка слетала после $('#head_tabs').css('position', 'fixed');
пришлось всё это городить.. позиции выставлять.. всякие соседнии элементы тоже..

Кроме того я сделал всякие фишки.. типа прозрачности..
и при наведении снова в полную видимость.

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(){
отведение
});

ramzes (20 Октября 2011 / 00:04)
13. valerik, а чем хвалишься то? не заметил там фиксированных блоков вообще

Чёто с хрома не пашет
С других браузеров норм

$("id").hover(function(){
наведение
},
function(){
отведение
});

А вот за это спасибо, не знал

15. valerik, у тебя там вообще много странного)) там реально 3-5 строк простейшего кода
я выше пример писал

Добавлено через 01:52 сек.

valerik (19 Октября 2011 / 21:59)
да чёто разметка слетала после $('#head_tabs').css('position', 'fixed');

fixed как и absolute позиционируется не влияя на другие элементы (для них, просто нет этих блоков

ramzes (20 Октября 2011 / 00:12)
fixed как и absolute позиционируется не влияя на другие элементы (для них, просто нет этих блоков

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

$('#head_tabs').css('position', 'fixed');
а разве не проще сделать вот так
$('#head_tabs').css({position:'fixed', top: '0px', opacity: '0.3'});

Угу, поправил..