0

position: fixed に設定されたヘッダー内にあるドロップダウン メニューがあります。モバイル デバイスで表示する場合、ヘッダーを固定したままにしたいのですが、メニューがアクティブになると、jQuery はヘッダーの位置を動的に相対位置に変更します。これで問題なく動作しますが (以下のコードを参照)、修正が必要な問題がいくつかあります。menu-toggle リンクが再度クリックされた場合 (メニューを閉じた場合)、ヘッダーは以前の状態 "relative" に戻りません。これを行う方法はありますか？ちらつきにも気付きます。たとえば、ページの半分までスクロールしてから、メニューをクリックして開くと、ページがジャンプして、メニューがヘッダー内に配置されている上部に戻りません。 . 私は純粋な 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;
    }
}

ジャバスクリプト

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

1 に答える 1