Я пытаюсь добавить липкий навигатор в свой блог, который будет оставаться на самом верху при прокрутке вниз. Просто я использовал 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
позиционировании заставила навигатора выйти из потока, поэтому следящий контент вскакивает, чтобы пополнить свое положение. Но я не знаю, как этого избежать. Может ли кто-нибудь придумать какую-нибудь идею?
Легким решением было бы переключить класс, определенный 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;
}