Sticky Заголовок Scroll misfunction

Question

Я получил следующий код для моего заголовка, который получает липким, если она достигает верхнюю часть окна:

$(function() { 
    var stickyHeaderTop = $('#outer-header').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > stickyHeaderTop) { 
      $('#outer-header').css({ 
       position: 'fixed', 
       top: '-300px' 
      }); 
     } else { 
      $('#outer-header').css({ 
       position: 'static', 
       top: '0px' 
      }); 
     } 
    }); 
}); 

Он работает, но, как он достигает вершины и становится липкой свитку контента нормальный прокрутка + высота div, которая была над заголовком (так что он делает слишком большой прыжок, который не выглядит гладко)

Answer 1

Благодаря CBroe за его подсказку! Это рабочий раствор:

$(function() { 
    var stickyHeaderTop = $('#outer-header').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() >= stickyHeaderTop) { 
      $('#outer-header').css({ 
       position: 'fixed', 
       top: '-300px' 
      }); 
      $('#main').css({ 
       position: 'relative', 
       top: '332px' 
      }); 
     } else { 
      $('#outer-header').css({ 
       position: 'absolute', 
       top: '0px' 
      }); 
      $('#main').css({ 
       position: 'relative', 
       top: '332px' 
      }); 
     } 
    }); 
});