在打开（活动）移动下拉菜单中将标题的位置从固定更改为相对？

Question

I have a responsive design that when viewed on a device less than 600px wide, uses drop down multi-level navigation. It is nested inside a header that is set to position: fixed. The problem is, that when you drop down the menu the menu overflows downward and does not scroll (because the header is fixed), so the tabs are not visible. Is there a way (using Javascript, jQuery or PHP) to dynamically set it so that when the drop down menu (by way of clicking on the hamburger menu icon in the top right or left), it changes the header's position from fixed to relative?

A good example would be www.dribbble.com. When it's less than 800px wide, the header is sticky (fixed), then when you click on the menu in the top left, it's obvious that the header's position automatically changes to relative.

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

    });

Answer 1

Well, if you have a custom id or some other kind of attribute for a selector than you can change the position CSS property in multiple ways.

CSS3

@media all and (max-width: 800px) {
   header[role="banner"] {
      position: relative;
   }
}

jQuery

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

---

Note: You edited your post. Did you realized that you used position: fixed; in both of your CSS @media rules? Change the second to position: relative;.