Суть: Хедер при прокрутке страницы должен уходить за верхний край пока на экране не останется только строка меню. После этого должен фиксироваться.
Не могу нигде найти прямо вот сейчас пример чтобы подсмотреть. А то что накидал сам какое-то глючное:
nash-krym.info
В FF иногда пропускает позицию и меню проматывается, а иногда не чувствует 0 скрола. Не transition изменения падинга у элемента #nav.
В хромобраузерах этих проблем нет, но момент остановки меню какой-то дерганный.
Может подскажите как поправить эти моменты?
Сам скрипт:
var old_rop = 0;
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
if (top < 89 ) {
$('#header .logo').css({'opacity': 1-top/89})
}
if (top > 89 && old_rop < 89) {
$('#header .logo, #header .social').css({'display': 'none'})
$('#nav').css({'padding': '0 3px 0 3px'})
$('#header').css({'position': 'fixed', 'height': '41px'})
$('#main').css({'margin-top': '41px'})
} else if (top < 89 && old_rop > 89) {
$('#header').css({'position': 'inherit', 'height': '130px'})
$('#nav').css({'padding': '0 3px 0 173px'})
$('#main').css({'margin-top': '0'})
$('#header .logo, #header .social').css({'display': 'block'})
}
old_rop = top;
});
});
