Сделать позицию удержания навигационной панели при прокрутке

Question

Я знаю, что этот вопрос задан раньше, но я уверен, что после проверки их нет ни одной из навигационных баров, где бы это было построено.

У меня в основном возникают проблемы с тем, что панель навигации «плавно» переключается в фиксированное положение в верхней части экрана после прокрутки ее исходного положения, а затем обратно.

Я включил код, и пример здесь: http://jsfiddle.net/r2a6U/

Вот фактическая функция, которая делает переключатель Div в режим фиксированного положения:

var navPos = $('#navContainer').offset().top; 

$(window).scroll(function(){ 

    var fixIT = $(this).scrollTop() >= navPos; 

    var setPos = fixIT ? 'fixed' : 'relative' ; 
    var setTop = fixIT ? '0' : '600' ; 

    $('#navContainer').css({position: setPos}); 
    $('#navContainer').css({'top': setTop}); 

}); 

Любая помощь будет оценена.

Приветствия

Answer 1

Вы можете устранить проблему, чтобы удалить стили вместо того, чтобы их relative и 600px. Я предлагаю вам добавить/удалить класс в JavaScript, который затем применит фиксированный CSS. В итоге вы получите гораздо более чистый и чистый JavaScript.

Также убедитесь, что вы правильно установили #navContainer, когда он исправлен.

jsFiddle

CSS

#navContainer.fixIT { 
    position:fixed; 
    top:0; 

    /* these will ensure it is centered so it doesn't jump to the side*/ 
    left:0; 
    right:0; 
    text-align:center; 
} 

JS

var navPos = $('#navContainer').offset().top; 
$(window).scroll(function(){ 
    var fixIT = $(this).scrollTop() >= navPos; 

    if (fixIT) 
     $('#navContainer').addClass('fixIT'); 
    else 
     $('#navContainer').removeClass('fixIT'); 
}); 

Answer 2

Фикс его здесь: jsFiddle

Только обновление небольшого скрипта:

var navPos = $ ('# navContainer'). offset(). top;

$ (окно) .scroll (функция() { вар navContainer = $ ('# navContainer!');.

if($(this).scrollTop() >= navPos) { 
     // make it fixed to the top 
     $('#navContainer').css({ 'position': 'fixed', 'top': 0 }); 
    } else { 
     // restore to orignal position 
     $('#navContainer').css({ 'position': 'relative', 'top': 600 }); 
    } 
});