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

Question

我有一个响应式设计，当在小于600px 宽度的设备上查看时，使用下拉多级导航。它嵌套在设置为position: fixed 的标头中。问题是，当您下拉菜单时，菜单会向下溢出并且不会滚动（因为标题是固定的），因此选项卡不可见。有没有办法（使用 Javascript、jQuery 或 PHP）动态设置它，以便当下拉菜单（通过单击右上角或左上角的汉堡菜单图标）时，它会更改标题的位置 fixed到relative？

一个很好的例子是 www.dribbble.com。当宽度小于800px时，header是粘性的（fixed），那么当你点击左上角的菜单时，很明显header的位置会自动变为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

好吧，如果您有一个自定义 id 或其他类型的选择器属性，那么您可以通过多种方式更改 position CSS 属性。

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

---

注意：您编辑了您的帖子。您是否意识到您在两个 CSS @media 规则中都使用了 position: fixed;？将第二个更改为position: relative;。