Javascript 如何使此定制双导航同时响应和固定？

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

现在难题就在这里。虽然这在超过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'）；
}
});  
});

首先，将上层导航置于

结构中可能是个好主意。
现在，您可以使用jQuery在页面加载时构建一个“移动菜单”，例如

var menu1 = $('ul.primary-menu').html();
var menu2 = $('ul.secondary-menu').html();

$('body').append('<div class="mobile-menu"><ul class="primary-menu">' + menu1 + '</ul><ul class="secondary-menu">' + menu2 + '</ul></div>');

var menu1=$（'ul.primary menu'）.html（）；
var menu2=$（'ul.secondary menu'）.html（）；
$（'body'）。追加（'ul class=“primary menu”>'+menu1+'
'+menu2+'
）；

然后，您可以设置此样式，然后隐藏整个网站，并在移动屏幕上显示它（同时隐藏整个导航）

在此之后，您可以通过菜单链接设置隐藏/显示或幻灯片等触发器

我发现这可能是长导航项目最简单的方法

这是我做的一把快速小提琴：

var menu1 = $('ul.primary-menu').html();
var menu2 = $('ul.secondary-menu').html();

$('body').append('<div class="mobile-menu"><ul class="primary-menu">' + menu1 + '</ul><ul class="secondary-menu">' + menu2 + '</ul></div>');