javascript - 在打开(事件)移动下拉菜单时将标题的位置从固定位置更改为相对位置？

Question

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

一个很好的例子是 www.dribbble.com。当宽度小于800px时，header是粘性的(fixed)，然后当你点击左上角的菜单时，很明显header的位置会自动变为相对。

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