Как отключить скролл за пределы экрана?

Работаю над моб. версией сайта. Пожалуйста, зайдите на сайт с моб. устройства: Сайт

Если попробовать проскролить пальцем вниз то вы увидите, что зафиксированный хедер вылазит за пределы viewport, так как у него css position:fixed;

Вопрос. Как исправить этот некрасивый баг? так как при скроле в x < 0 хедер покрывается белым тлом. Вариант либо что то думать с хедером, либо отключить скрол за пределы x<0. Кто может помочь найти правильное решение?

я пробовал так:

$(window).bind("scroll", function() {
    var navHeight = $( window ).height();
      if ($(window).scrollTop() < 0) {
        $(".top").css({"position":"relative"});
      }
      else {
        $(".top").css({"position":"fixed"});
      }
   });

тоесть изменял позиционирование хедера,Но это работает не совсем корректно, и иногда лагает так как на моб устройстве пальцем в одно касание можно вести сколько хватит экрана, и джаваскрипт не успевает срабатывать