Разницы мобильных браузеров Chrome и Firefox и как исправить.Position fixed

Всем привет.Я новичок в сайтостроении. Недавно создал свой первый статический сайт. Все нормально и стабильно работало пока я не загрузил сайт в своем мобильнике. Проблема первая заключается в том, что если зайти в мобильную версию в ПК в хроме (с шириной 480 пикселей), то все работает стабильно, нет никаких глюков. Но если зайти через смартфон в сайт, то все показывает не так как в мобильной версии браузера Chrome в ПК. Проблема заключается в основном в position:fixed. Хедер сначала должен быть 65 пикселей, потом при скролле вниз он должен менять свой размер на 37 пикселей. В смартфоне в браузере Firefox все работает отлично. Но в Chrome если листать вниз, то хедер глючит, а потом прилипает тупо вверх и даже если скроллить до самого верха, то все равно хедер не возвращается в свой первоначальный размер (65 пикселей). Плюс ко всему в хроме в, отличие от фаерфокса в самом низу появляется огромный белый отступ, при том, что в коде все в порядке. Помогите пожалуйста.Вот мой сайт http://heshimovnotes.com/

.menu {
    background: white;
    height: 65px;
}
.menu.sticky {
    height: 37px;
    max-width: 480px;
    padding: 0;
    background: white;
}

И JQuery:

  $(window).scroll(function(){
      if ($(this).scrollTop() > 20) {
        $('.menu ').addClass("sticky");
      } 
      else {
        $('.menu').removeClass("sticky");
      }
    });