Jquery 固定导航问题

我有一个客户，想要的两个自定义导航菜单堆叠在彼此的顶部和一个滑块下，其标志在中间。他们还希望菜单在滚动时固定。我已经完成了这项工作，效果令人惊讶。这里是链接

现在难题就在这里。虽然这在超过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>

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---------->

jQuery（文档）.ready（函数（$）{
var overheight=$（“#滑块”）.outerHeight（）；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>高于高度）{
$（“#导航框”）.addClass（'fixed'）.css（'top'，'0'）.next（）.css（'margin-top'，'55px'）；
}否则{
$（“#导航框”）.removeClass（'fixed'）.next（）.css（'margin-top'，'0'）；
}
});
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>高于高度）{
$（'second nav'）.addClass（'fixed'）.css（'top'，'0'）.next（）.css（'margin-top'，'40px'）；
}否则{
$（'second nav'）.removeClass（'fixed'）.next（）.css（'margin-top'，'0'）；
}
});  
});

我建议从标准媒体查询开始。根据您的情况，您也可以使用最大宽度或最大设备宽度。看起来所有查询的最大宽度都超过了1200px（大格式）。您需要为每个布局确定导航将如何适应。对于固定布局，需要按比例减少每个元素。例如，如果一行中有五个元素的宽度为1200px，那么对于600px的移动屏幕，可以将每个元素的宽度减半

@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 */
}

更多信息：

如果你看一下Twitter引导的mobile first方法，它们会为不同宽度的设备设置以下主要断点，因为手机是默认的CSS（而不是在媒体查询中）：

不过，对于您来说，您需要使用最大宽度减法。如果知道最大宽度，可以按比例调整每个导航元素的大小

    /* 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;}
    }

Bootstrap采用移动优先的方法，这与HD优先设计不同。所以，你可以反过来考虑，也就是说你的1200+分辨率是默认的，其他的都需要修改。我知道这并不理想，也不是我推荐的，但你说过你不想改变所有这些，所以这只是一个解决办法

---

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

最好不要吝啬于您的编码技能，而是该死的马虎。最终我相信这就是为什么你没有得到想要的结果。媒体查询在你的CSS中工作，但我很确定它会在所有不同的调用中丢失。我对您提供的代码进行了修改，如果缩小窗口，“leftnav”将变为红色，您可以在CSS中看到。我建议您组织代码，或者从头开始，使用类似引导的框架。谢谢马特。。。正如我在文章中所提到的，代码是草率的，但它只是CSS。正如您所看到的，这仍然是一项正在进行的工作。不幸的是，重新开始不是一个选项，因为有一个最后期限。您还可以看到，这是每个客户端的一个非常定制的请求，这有点麻烦。你能提供一种不同的方式来完成我需要做的事情吗？再次感谢！谢谢你的意见。我会仔细看看，看看我能想出什么。我确实尝试添加了你建议的第一个，但没有效果。我复制并粘贴到我已有的每个查询中。我做错什么了吗？我对其他事情的反应都没有问题。所以，我认为你缺少的是三件事。1） 一个桌面设计——这应该是一个普通的基本css，没有任何媒体查询。2） 如果您希望以不同的方式对待平板电脑，请执行如上所述的平板电脑媒体查询。通常这不是必需的，因为大多数网站看起来都不错。3） 一个移动媒体查询——它是为小于800px或600px的分辨率设计的。谢谢。媒体查询应该放在哪些元素上？此外，有什么好的解决方案可以缩小移动设备的固定导航？好的，我已经编辑了答案，包括Twitter引导媒体查询。我建议在纸上画出每个宽度的样子。写出每个元素的ID和类，然后在媒体查询中调整每个元素。感谢您全面深入的回答。我要试试这个，看看我能得到什么结果。我真的很感谢你的帮助。我会让你知道结果是什么。

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

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

    /* 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;}
    }