Избегайте неприятных пропусков при реализации липкого навигатора в JavaScript

0

Я пытаюсь добавить липкий навигатор в свой блог, который будет оставаться на самом верху при прокрутке вниз. Просто я использовал jQuery и .scrollTop().

$("document").ready(function($){
    /* Sticky Navigation Bar */
    var nav = $('nav');
    $(window).scroll(function () {    
        if ($(this).scrollTop() > 125) {
            nav.addClass("fixed-nav");
        } else {
            nav.removeClass("fixed-nav");
        }
    });
});

При fixed-nav местоположении фиксированной fixed-nav в CSS

.fixed-nav {
  z-index: 9999;
  position: fixed;
  top: 0;
}

Это работает (см. Мой блог). Тем не менее я получил небольшую, но очень неприятную проблему. Когда вы прокручиваете страницу сверху вниз, вы заметите, что прямо перед тем, как панель навигации станет fixed, содержимое под ней немного поднимется вверх. Я знаю, что причина в fixed позиционировании заставила навигатора выйти из потока, поэтому следящий контент вскакивает, чтобы пополнить свое положение. Но я не знаю, как этого избежать. Может ли кто-нибудь придумать какую-нибудь идею?

1 ответ

0

Легким решением было бы переключить класс, определенный nav-fixed на ваше тело, а затем добавить margin-top в ваш #main div, который соответствует высоте #main пока он был установлен статически.

.nav-fixed nav {
    z-index: 9999;
    position: fixed;
    top: 0;
}

/* Identical to nav height */
.nav-fixed #main {
    margin-top: 40px;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню