Resolut1on

codepen.io/anon/pen/qaNJZJ?editors=1100
Я использовал vh и calc().

Задать скролл для блока ниже, а не для блока в целом.
Приме:

<div class="menu">
        <div class="content">

        </div>
    </div>

И соответственно css

.content {
          // скролл
     }

В вашем случае скролл стоит у блока .menu

Добавь:
display: inline-block;

.button { display: block; }

display: block / inline-block

Пример

js:

$(window).scroll(function(){
  if($(this).scrollTop() > 1){
    $('.nav').addClass('sticky');
  } else {
    $('.nav').removeClass('sticky');
  }
});

background-position: 50%;
    background-size: cover;

htmlbook.ru/css/background
htmlbook.ru/css/background-size
htmlbook.ru/css/background-position

https://jsfiddle.net/2phfvjs3/