jquery - 固定导航问题

Question

我有一个客户想要两个自定义导航菜单，它们堆叠在彼此之上，并位于中间带有 Logo 的 slider 下方。他们还希望菜单在滚动时固定。我已经执行了这个并且效果惊人。这是链接... DEMO

这就是难题。虽然这在任何超过 1200 像素的设备上看起来都很棒，但对于我来说，我无法弄清楚如何让它在低于 1200 像素的设备上看起来很棒。我已经将媒体查询添加到几乎所有的代码中并且仍然注意到。除此以外，我已将页面上的其他所有内容设为响应式。也许删除固定菜单是较小设备的一个选项？？？任何帮助将不胜感激。这是代码....顺便说一句，我知道代码很草率而且很多，欢迎提出任何清理它的建议....

HTML

<div id="nav-container">

<div id="nav-box" class="animated fadeInDown">

<a class="btn rounded butter" href="#">Start Dinating</a>
<a class="btn rounded butter" href="#">Follow Us</a>
<a class="btn rounded butter" href="#"><i class="icon-facebook"></i></a>
<a class="btn rounded butter" href="#"><i class="icon-twitter"></i></a>  
<a class="btn rounded butter" href="#"><i class="icon-instagram"></i></a> 
<a class="list-group-item" href="#"></a>
<img src="http://www.jshuadvd.com/test/wp-content/uploads/2014/11/logo.png" alt="Dinate" width="199" height="204">
<a class="btn2 rounded butter" href="#">Merchandise</a>
<a class="btn2 rounded butter" href="#"><i class="icon-lock"></i>Log In / Register</a>
<a class="btn2 rounded butter" href="#"><i class="icon-shopping-cart"></i>View Tab</a>

</div>

<nav id="second-nav">

<div id="nav-left">
    <ul>
    <li><a href="#">HOME </a></li>
    <li><a href="#">OUR RESTAURAUNTS </a></li>
    <li><a href="#">DINATING EVENTS </a></li>
    </ul>
</div>

<div id="nav-right">
    <ul>
    <li><a href="#">CONTACT </a></li>
    <li><a href="#">BLOG </a></li>
    <li><a href="#">CHARITES </a></li>
    </ul>
</div>

</nav>
</div>
</div>

CSS

            #nav-container {
              height: 180px;
              text-decoration: none;
              font-size: 15px;
              font-family: helvetica, arial, sans-serif;
              text-transform: uppercase;
            }


            @media screen and (max-width: 1200px){
              #nav-container {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: 12px;
               }
            }


            #nav-box {
              position: relative;
              background: #222;
              text-align: center;
              width: 100%;
              height: 50px;
              z-index: 2000;
              padding-top: 0px;
              padding-bottom: 5px;
              line-height: 0;

            }


            @media screen and (max-width: 1200px){
              #nav-box {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            #nav-box img {
              position: absolute;
              top: 0;
              left: 50%;
              margin-left: -100px;
            }


            @media screen and (max-width: 1200px){
              #nav-box img {
               display: none;

               }

            }



            /* --------------------- BUTTTONS ------------------- */



            .btn {
              overflow: hidden;
              position: relative;
              display: inline-block;
              height: 2em;
              line-height: 2em;
              padding: 0 1em;  
              left: -7.5%; 
              margin: 10px 30px 0 0; 
              -moz-transition: color 400ms;
              -o-transition: color 400ms;
              -webkit-transition: color 400ms;
              transition: color 400ms;
              }


            @media screen and (max-width: 1200px){
              .btn {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: auto;
               }

            }


            .btn2 {
              overflow: hidden;
              position: relative;
              display: inline-block;
              height: 2em;
              line-height: 2em;
              padding: 0 1em;  
              left: 9.8%; 
              margin: 10px 30px 0 0; 
              -moz-transition: color 400ms;
              -o-transition: color 400ms;
              -webkit-transition: color 400ms;
              transition: color 400ms;
            }


            @media screen and (max-width: 1200px){
              .btn2 {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: auto;
               }

            }


            .btn:before {
              content: '';
              position: absolute;
              z-index: -1;
              height: 0%;
              width: 100%;
              bottom: 0;
              left: 0;
              -moz-transition: height 100ms;
              -o-transition: height 100ms;
              -webkit-transition: height 100ms;
              transition: height 100ms;
              }

            @media screen and (max-width: 1200px){
              .btn:before {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            .btn2:before {
              content: '';
              position: absolute;
              z-index: -1;
              height: 0%;
              width: 100%;
              bottom: 0;
              left: 0;
              -moz-transition: height 100ms;
              -o-transition: height 100ms;
              -webkit-transition: height 100ms;
              transition: height 100ms;
              }


            @media screen and (max-width: 1200px){
              .btn2:before {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }



            .btn:hover {
              color: #A4C739;
              border-color: #A4C739;
              }


            .btn2:hover {
              color: #A4C739;
              border-color: #A4C739;
              }


            .btn:hover:before {
              height: 100%;
              }


            .btn2:hover:before {
              height: 100%;
            }

            .rounded {
              border-radius: 2em;
            }

            @media screen and (max-width: 1200px){
              .rounded {
               box-sizing: border-box;
               border-radius: auto;
               width:auto;

               }

            }

            .butter {
              color: white;
              border: 3px solid white;
              border-radius: 2em;
            }

            @media screen and (max-width: 1200px){
              .butter {
               box-sizing: border-box;
               border-radius: auto;
               width:auto;

               }

            }


            .butter:before {
              background-color: #A4C739;
            }

            @media screen and (max-width: 1200px){
              .butter:before {
               box-sizing: border-box;
               width:auto;

               }

            }

            .butter:hover {
              color: white;
              border-color: white;
            }



            /* ---------------- SOCIAL NAV ICONS ------------------ */

            .icon-facebook {
              margin-left: -10px;
              margin-right: -10px;
            }

            @media screen and (max-width: 1200px){
              .icon-facebook {
               box-sizing: border-box;
               width: auto;
               }

            }

            .icon-twitter {
              margin-left: -10px;
              margin-right: -10px;
            }

            @media screen and (max-width: 1200px){
              .icon-twitter {
               box-sizing: border-box;
               width:auto;
               }

            }

            .icon-instagram {
              margin-left: -10px;
              margin-right: -10px;
            }

            @media screen and (max-width: 1200px){
              .icon-instagram {
               box-sizing: border-box;
               width: auto;
               }

            }


            /* ---------------- BUTTON ICONS ------------------ */

            .icon-shopping-cart {
              margin-right: 6px;
              margin-left: -4px;
            }

            @media screen and (max-width: 1200px){
              .icon-shopping-cart {
               box-sizing: border-box;
               width:auto;
               }

            }

            .icon-lock {
              margin-right: 5px;
              margin-left: -4px;
            }


            @media screen and (max-width: 1200px){
              .icon-lock {
               box-sizing: border-box;
               width:auto;
               }

            }


            .clear {
              clear: both;

              }


            /* ---------------- BUTTONS END ------------------ */


            /* ---------------- SECOND NAV ------------------- */
              #second-nav {
              width: 100%;
              text-align: center;
              font-size: 15px;
              font-family: helvetica, arial, sans-serif;
              text-transform: uppercase;  
              z-index: 999;
              }



            @media screen and (max-width: 1200px){
              #second-nav {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: 12px;
               }

            }


            /* ----------------- LEFT NAV ------------------- */


            #nav-left {
              z-index: 1;
              margin-bottom: -92px; /* nav height */
              padding: 5px 60px;
              background: #000;
              transition: box-shadow 400ms; 
            }

            @media screen and (max-width: 1200px){
              #nav-left {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-left ul {
              margin:0 auto;
              width:100%;
              list-style: none;
              *zoom: 1;
            }


            @media screen and (max-width: 1200px){
              #nav-left ul {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-left ul:after {
                clear:both;
                display: table;
                content: "";
            }


            @media screen and (max-width: 1200px){
              #nav-left ul:after {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            #nav-left li {
              float: left;
              text-align: center;
              padding: 0 45px;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px;
              list-style: none;
              border-left:1px solid #222;
            }


            @media screen and (max-width: 1200px){
              #nav-left li {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               border: none;
               }

            }


            #nav-left li:first-child {
              border-left: 0;
              padding-left: 0;
             }


            #nav-left a {
              position: relative;
              display:block;   
              color: #fff;
              padding: 40px 0;
              line-height: 1px;
              text-decoration: none;
              -moz-border-radius: 4px;
              -webkit-border-radius: 4px;
              border-radius: 4px; 
            }


            @media screen and (max-width: 1200px){
              #nav-left a {
               box-sizing: border-box;
               width:100%;
               border: none;
               }

            }    

              #nav-left a:hover {
              color: #A4C739;
            } 


            .clear {
            clear: both;

            }


            /* --------------- RIGHT NAV ---------------- */

            #nav-right {
              z-index: 1;
              margin-bottom: -72px; /* nav height */
              padding: 0 120px; 
              background: #000;
              transition: box-shadow 400ms; 
            }

            @media screen and (max-width: 1200px){
              #nav-right {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            #nav-right ul {
              margin:0 auto;
              width:100%;
              list-style: none;
              *zoom: 1;
            }

            @media screen and (max-width: 1200px){
              #nav-right ul {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-right ul:after {
                clear:both;
                display: table;
                content: "";
            }

            @media screen and (max-width: 1200px){
              #nav-right ul:after {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-right li {
              float: right;
              text-align: center;
              padding: 0 45px ;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px; 
              list-style: none;
              border-right:1px solid #222;
            }


            @media screen and (max-width: 1200px){
              #nav-right li {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               border: none;
               }

            }

            #nav-right li:first-child {
              border-right: 0;
              padding-right: 0;

             }


            #nav-right a {
              position: relative;
              display:block;   
              color: #fff;
              padding: 40px 10px;
              line-height: 1px;
              text-decoration: none;
              -moz-border-radius: 4px;
              -webkit-border-radius: 4px;
              border-radius: 4px; 
            } 


            @media screen and (max-width: 1200px){
              #nav-right a {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               border: none;
               }

            }   

              #nav-right a:hover {
              color: #A4C739;
            /*  -moz-box-shadow: 0 0 0 1px #fff;
              -webkit-box-shadow: 0 0 0 1px #fff;
              box-shadow: 0 0 1px 1px #fff; */
            }     


             .fixed {
                  position:fixed !important;
                } 



            .clear {
              clear: both;
            }

JS/JQUERY

    <!------------Begin JavaScript Functions for Fixed Header-------->

    <script type='text/javascript'> 
    jQuery(document).ready(function($){
    var aboveHeight = $('#slider').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('#nav-box').addClass('fixed').css('top','0').next().css('margin-top','55px');
        } else {
        $('#nav-box').removeClass('fixed').next().css('margin-top','0');
        }

    });
      $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('#second-nav').addClass('fixed').css('top','0').next().css('margin-top','40px');
        } else {
        $('#second-nav').removeClass('fixed').next().css('margin-top','0');
        }

    });  
    });


    </script>

    <!------------End JavaScript Functions for Fixed Header---------->

Answer 1

我建议从标准媒体查询开始。您也可以根据您的情况使用 max-width 或 max-device-width 。似乎您的所有查询都只是 max-width 超过 1200px(大格式)。您需要为每个布局弄清楚导航将如何适应。对于固定布局，您需要按比例减少每个元素。例如，如果您在一行中有五个元素，宽度为 1200 像素，对于 600 像素的移动屏幕，您可以将每个元素的宽度减半。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* iPads (portrait and landscape) Styles */
}

@media only screen 
(max-width : 600px) {
/* Mobile Only Styles */
}

更多信息: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果您查看 Twitter Bootstrap 移动优先方法，它们针对不同宽度的设备有以下主要断点，因为移动是默认 CSS(不在媒体查询中):

/* Small devices (tablets, 768px and up) */
@media (min-width: @768px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

http://getbootstrap.com/css/

不过，对于您来说，您将希望使用 max-width 一种减法方法。如果您知道最大宽度，则可以按比例调整每个导航元素的大小。

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
      .butter.btn-1 {width:128px; font-size: 12px;}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
      .butter.btn-1 {width:105px; font-size: 10px;}
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
      .butter.btn-1 {width:80px; font-size: 8px;}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
      .butter.btn-1 {width:50px; font-size: 6px;}
    }

http://scotch.io/quick-tips/css3-quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap 采用移动优先的方法，这与您的高清优先设计不同。所以，你可以反过来想，也就是说你的1200+分辨率是默认的，其他的都需要修改。我知道这并不理想，也不是我的建议，但您已经说过您不想更改所有这些，所以这只是一种解决方法。

最终，我认为固定导航上的按钮会太小。您应该考虑的另一件事是使用相对 em 宽度而不是像素宽度。同样，Bootstrap 框架已经为您解决了很多这样的事情，因此大小已经是相对的。