固定滚动条上方的元素

Question

有人可以帮我在滚动条下面设置一个固定的蓝色页脚吗？以下是我的代码和HTML结构的示例：

$('#check').click(function () {
  $('body').addClass('hide-scrollbar-y');
  $('.products-pop-up').fadeIn(500);
});

body {
  color: white;
}

.button {
  border: none;
  background-color: #adA122;
  padding: 20px;
  color: white;
  border-radius: 10px
}

.hide-scrollbar-y {
  overflow-y: hidden;
}

.products-pop-up {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  z-index: 3;
  background-color: #1c1d22;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  .container {
	height: 600px;
  }
}

.footer {
  background-color: blue;
  position: fixed;
  bottom: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="check" class="button">click click </button>
<div class="products-pop-up">
  <div class="container">
    test
  </div>
  <div class="footer">footer</div>
</div>