Почему липкая навигация прыгает при фиксации?

Мой сайт: http://southsideonline.com/

У меня просто есть простой sticky.js, который исправляет навигационную панель при прокрутке, но содержимое под навигационной панелью подпрыгивает под навигационной панелью. Есть идеи, как это исправить?

jQuery(function(){
  var menuOffset = jQuery('.menu-wrapper')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('.menu-wrapper').addClass('fixed');
    } else {
      jQuery('.menu-wrapper').removeClass('fixed').removeAttr("width");
    }
   });
});

кажется, что это легко исправить. Я попытался использовать jQuery .next(), чтобы поместить верхний край следующего .css после навигации, чтобы он помещался прямо под навигацией, как и должно быть. какие еще светлые идеи?


javascript navigation jquery sticky
person Dlaugh14    schedule 25.07.2014    source источник
comment
Что вы имеете в виду, говоря, что содержимое под навигационной панелью всплывает под навигационной панелью? Вы имеете в виду, что содержимое перемещается под панель навигации при прокрутке? Я не вижу ничего необычного в Chrome 36.   -  person John    schedule 25.07.2014
comment
Какой браузер вы используете, что вы видите это?   -  person Colin DeClue    schedule 26.07.2014
comment
Неважно, теперь я понимаю ваш вопрос. я вижу проблему   -  person John    schedule 26.07.2014

Ответы (4)


arrow_upward
3
arrow_downward

Оберните <div class="menu-wrapper" id="menu-wrapper"> другим div (заполнителем) и установите height на 84 пикселя с помощью CSS (равно фиксированной высоте меню) или с помощью JS. Вы столкнулись с этой проблемой, потому что фиксированные элементы были исключены из расчета позиции.

person Andrei 'finelord' Baibakou    schedule 25.07.2014
comment
Спасибо чувак! Вот оно. В процессе исправления для всех размеров экрана... Я занимаюсь этим всего около года. В свободное время, поэтому я всегда учусь. Благодаря тонну!!! - person Dlaugh14; 26.07.2014

arrow_upward
1
arrow_downward

После того, как ваша навигация станет липкой / фиксированной, остальная часть макета перемещается вверх по странице, чтобы заполнить пространство, которое занимала навигация, когда она была относительно позиционирована (или изначально с потоком).

person Evan    schedule 25.07.2014
comment
Это не ответ, это описание проблемы. - person Colin DeClue; 26.07.2014

arrow_upward
1
arrow_downward

Добавьте статическую высоту в заголовок, чтобы он не уменьшался, когда панель навигации выходит из потока, примерно так:

header { height: 117px; }

Это сработало для меня.

person Hanuman    schedule 25.07.2014
comment
Андрей Байбаков ниже был более конкретным. Я установил высоту, но мне нужно было сделать это для div-заполнителя. Спасибо хоть! - person Dlaugh14; 26.07.2014
comment
Это сработало для меня, потому что навигация была в заголовке. Таким образом, несмотря на то, что навигация становится липкой и не включается в расчеты высоты, заголовок остается той же высоты и, следовательно, позиционирование остальных элементов страницы. Спасибо! - person iluvpinkerton; 31.07.2015

arrow_upward
0
arrow_downward

У меня была проблема с выравниванием контейнера (300 пикселей по центру с границей), которое должно было быть исправлено. После того, как содержимое достигло контейнера, оно немного подпрыгнуло (примерно на 2-5 пикселей справа). Мне удалось исправить это, поставив 0 полей и заполнив тело в css).

person moa    schedule 25.08.2018