Как сделать фиксированное, сжимаемое горизонтальное меню?

Суть: Хедер при прокрутке страницы должен уходить за верхний край пока на экране не останется только строка меню. После этого должен фиксироваться.
Не могу нигде найти прямо вот сейчас пример чтобы подсмотреть. А то что накидал сам какое-то глючное: 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;
				});
			});
  • Вопрос задан
  • 2564 просмотра
Пригласить эксперта
Ответы на вопрос 1
Frz
@Frz
Full-stack web, React/React Native
Вообще лучше не пытаться изменять текущие стили, а показывать/прятать маленькую плашку с меню.
Так вы ещё и меню прячете, из-за этого страница размер меняет. Это вообще фэйл конкретный.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы