jQuery sticky navbar

Question

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

Код (Jquery):

function findDistance() 
{ 
    var distToTop = $(window).scrollTop(); 
    var navOffset = $('#navbar').offset().top; 
    var distance = (navOffset - distToTop); 
    return distance; 
} 
$(document).ready(function() 
{ 
    var defaultNavDist = 166; 
    var distance = findDistance(); 
    var fixedSet = false; 
    $(window).scroll(function() 
    { 
     if(distance < 1 && fixedSet == false) 
     { 
      fixedSet = true; 
      $('#navbar').css('position', 'fixed'); 
     } 
    }); 
}); 

Ссылка на jsFiddle: http://jsfiddle.net/fj10ruqs/

Answer 1

При запуске обработчика окна прокрутки, расстояние не пересчитывается. Вы должны положить distance = findDistance(); внутри обработчика прокрутки. Вы также, вероятно, захотите добавить $('#navbar').css('top', '0');, когда вы установите его на верх, чтобы он был наверху.

$(window).scroll(function() 
    { 
     distance = findDistance(); 
     if(distance < 1 && fixedSet == false) 
     { 
      fixedSet = true; 
      $('#navbar').css('position', 'fixed'); 
      $('#navbar').css('top', '0'); 
     } 
    });