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

Question

我有一个下拉菜单，它位于设置为position：fixed的标题内。 在移动设备上查看时，我希望标题保持不变，但是当菜单被激活时，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');
            });
        });

Answer 1

所以，你实际上并没有在那里任何JS代码，将切换之间你的头的位置fixed和relative 。

我可能要做的就是在您的标头上使用toggleClass 。

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

然后在你的CSS

header[role="banner"] {
  position: fixed;
}
header[role="banner"].active {
  position: relative;
}

您获得的屏幕跳转可能是由于将位置从“固定”更改为“相对”，因为“相对”会将标头添加回正常的页面流中。 因此，要解决此问题，您还可以切换标题下方的任何类，因此，在活动状态下，其空白边距为0；在非活动状态下，其空白边距等于标题的高度。