Question

我有一个下拉菜单，位于设置为position：fixed的标题内。在移动设备上查看时，我希望标题保持固定，但是当菜单被激活时，jQuery会动态地将标题的位置更改为相对位置。这工作正常（见下面的代码），但我需要解决一些问题。如果再次单击菜单切换链接（关闭菜单），标题不会返回其先前的状态“relative”。有没有办法做到这一点？我还注意到一个闪烁，所以让我们说你向下滚动页面的一半，然后点击菜单打开它，页面跳跃并不会滚动回到菜单位于标题内的顶部，因为它应该。我更喜欢纯CSS解决方案，但这似乎不可能。我可以设置规则，以便如果它的宽度小于499像素，则标题位置“相对”，但随后可用性失败，因为用户必须向上滚动到页面顶部才能访问下拉菜单。 / p>

非常感谢任何帮助。

这是我的代码：

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

您获得的屏幕跳转可能是将位置从固定更改为相对，因为相对会将标头添加回正常页面流。因此，为了解决这个问题，您还可以切换标题下方的任何类，因此在激活时，它的margin-top为0，而当处于非活动状态时，它的margin-top等于标题的高度。 / p>

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

1 个答案: