关于网页响应式布局fixed导航栏的问题

现在有个需求就是使用响应式布局但是呢又要导航栏部分是固定的，然后下面用全屏滚动，一共三屏，屏与屏之间切换时导航栏始终固定在上方，这个要用百分比会遇到问题。因为导航栏fixed以后就脱离正常文档流，这个时候就需要第一屏与上面有个距离，而导航栏用10%，第一屏用90%不能实现想要的结果，第一屏用margin也不行，导航栏会跟着一起下来，只能用像素，而且第一屏只能用padding，但是这样在响应式和滚屏上会出现问题，试了各种方法，没能完美解决，现求一个完美的解决方法。。

---

看看这个是不是，我们项目里面也有类似的东西。是移动端的，所以全部用了
box-sizing: border-box
这样就可以用padding给导航栏留出位置，用absolute把导航栏固定在padding出来的位置就行了。

我用scroll模拟了你的全屏滚动。
http://codepen.io/charleyw/pen/KVNMvM

---

我是新人，对这方面不太懂。但我看过一些类似的模板。
我看好多有用Jquery的stickmenu来解决。

  /* --------------------------------------------------------------------- */
  /* STICK MENU
  /* --------------------------------------------------------------------- */
  (function($) {
    if (!$(".header").length) return;
    $(window).on("scroll load", function() {
      var header = $(".header");
      var elmHeight = header.outerHeight(true);
      var scrolltop = $(window).scrollTop();
      if (scrolltop > elmHeight) {
        if (!header.hasClass("affix")) {
          header.addClass("affix");
        }
      } else {
        header.removeClass("affix");
      }
    });
  })(jQuery);

---

下面部分用absolute定位呢

.page {
    position:absolute;
    top:10%;
    bottom:0;
    width:100%;
}