激活下拉菜單時動態更改標題的位置

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

屏幕跳到你得到可能是從改變位置從固定到相對的，因爲相對於將添加頁眉回到正常的頁面流。因此，爲了解決這個問題，您還可以切換標題下方的任何類，因此當它處於活動狀態時，它的margin-top爲0，當它處於非活動狀態時，它的margin-top等於標題的高度。