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

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

阅读 4k
评论
    3 个回答
    • 1.5k

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

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

      • 279

      下面部分用absolute定位呢

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

        我是新人,对这方面不太懂。但我看过一些类似的模板。
        我看好多有用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);
          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章