Как правильно закрепить header?

Работал вот в таком направлении:

/**
 * Прилипающий хеадер
 */
var sticky = $('.navbar-fixed-top');
var defTop = sticky.offset().top;
scrollSticky(sticky, defTop);
$(window).on('resize', function () {
    scrollSticky(sticky, defTop);
});
$(window).on('scroll', function () {
    scrollSticky(sticky, defTop);
});
function scrollSticky(sticky, defTop) {
    if (defTop - ($('body').scrollTop() || $('html').scrollTop()) <= 0) {
        sticky.addClass("sticky-header-play");
        sticky.css("top", $(window).scrollTop() + "px");
    } else {
        sticky.removeClass("sticky-header-play");
    }
}

Все работает все хорошо, за исключением, что на телефонах и в сафари прилипающая шапка не статична, как бы догоняет скролл. Тоесть если прокрутить страницу хеадер догонит нужное место где-то через пол секунды. Такое происходит только на телефонах и в сафари.

Если вы хотите предложить что то типа:

position: fixed 

То это максимально плохое решение, так как при следующих стилях:

.navbar {
    width: 100%;
    min-width: 980px;
    height: 42px;
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    padding: 0px;
    background: linear-gradient(to bottom, #4D8EC2 0px, #4989BF 100%) repeat scroll 0% 0% transparent;
}

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

Собственно подскажите пожалуйста как решить проблему?