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

Question

我有一个下拉菜单，它位于设置为位置的标题内：固定。在移动设备上查看时，我希望标题保持固定，但是当菜单被激活时，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，而在不活动时，它的边距顶部等于标题的高度。