激活下拉菜单时动态更改标题的位置

我有一个下拉菜单，它位于设置为位置的标题内：固定。在移动设备上查看时，我希望标头保持固定，但是当菜单被激活时，jQuery 会动态地将标头的位置更改为相对位置。这工作正常(请参阅下面的代码(，但是我需要解决一些问题。如果再次单击菜单切换链接(关闭菜单(，则标头不会返回到其先前的"相对"状态。有没有办法做到这一点？我还注意到闪烁，所以假设您在页面向下滚动一半，然后单击菜单将其打开，页面有点跳跃并且没有滚动回菜单位于标题内的顶部。我更喜欢纯粹的CSS解决方案，但这似乎是不可能的。我可以设置规则，以便如果它小于 499 像素宽，标题将获得"相对"位置，但随后可用性失败，因为用户必须向上滚动到页面顶部才能访问下拉菜单。

任何帮助将不胜感激。

这是我的代码：

.HTML

<header role="banner" class="secondary">
<a href="#menu" class="menu-toggle"><em>Menu</em> <span aria-hidden="true"></span></a>
<nav id="nav" role="navigation">
<ul class="menu set">
<li class="subnav">
<a href="#">Link</a>
    <ul class="sub-menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</li>
</ul>
</nav>
</header>

.CSS

header[role="banner"] {
    width: 100%;
    background: #fff;
    display: block;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 10000; 
}
@media all and (min-width: 500px) {
    header[role="banner"] {
        position: fixed;
        top: 0;
        left: 0;
        clear: both;
        height: auto;
        display: block;
    }
}
@media all and (max-width: 499px) {
    header[role="banner"] {
        position: fixed;
    }
}

JAVASCRIPT

$(document).ready(function() {
    $('body').addClass('js');
          var $menu = $('#nav'),
              $menulink = $('.menu-toggle'),
              $menuTrigger = $('.subnav > a');
    $menulink.click(function(e) {
            e.preventDefault();
            $menulink.toggleClass('active');
            $menu.toggleClass('active');
    });
    var add_toggle_links = function() {         
        if ($('.menu-toggle').is(":visible")){
            if ($(".toggle-link").length > 0){
            }
            else{
                $('.subnav > a').before('<span class="toggle-link">Open</span>');
                $('.toggle-link').click(function(e) {       
                    var $this = $(this);
                    $this.toggleClass('active').siblings('ul').toggleClass('active');
                }); 
            }
        }
        else{
            $('.toggle-link').empty();
        }
     }
    add_toggle_links();
    $(window).bind("resize", add_toggle_links); 
        });

        $(document).ready(function() {
            $('.menu-toggle').click(function() {
               if ($( document ).width() < 499)
                  $('header[role="banner"]').css('position', 'relative');
            });
        });