大家好我正在尝试使用名为JointsWP的启动主题使用Foundation by Zurb构建一个可通过Web访问的WordPress站点。该网站位于，http://twps.psadeaf.org/v3/我创建了一个粘贴在顶部的粘性导航，但是当您向下滚动页面时，它会在悬停或选中时更改为导航按钮，它会显示在此处显示的完整导航页面顶部。
Bellow是导航的标记：
<div data-sticky-container>
<div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%">
<div class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar psad-nav" id="top-bar-menu">
<div class="top-bar-left show-for-medium">
<a href="http://twps.psadeaf.org/v3">
<img class="logo" src="http://twps.psadeaf.org/v3/wp-content/themes/JointsWP-CSS-master/assets/images/psad_logo.png" alt="PSAD Logo" style="width:200px;height:200px;" >
</a>
</div>
<div class="top-bar-right">
<ul id="menu-menu" class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown"><li id="menu-item-932" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-932 active"><a href="http://twps.psadeaf.org/v3/">Home</a></li>
<li id="menu-item-933" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-933"><a href="#">About PSAD</a>
<ul class="menu">
<li id="menu-item-914" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-914"><a href="http://twps.psadeaf.org/v3/about-psad/">Mission and History</a></li>
<li id="menu-item-924" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-924"><a href="http://twps.psadeaf.org/v3/bylaws/">Bylaws</a></li>
<li id="menu-item-913" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-913"><a href="http://twps.psadeaf.org/v3/officers-committees/">Officers</a></li>
<li id="menu-item-925" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-925"><a href="http://twps.psadeaf.org/v3/meeting-minutes/">Meeting Minutes</a></li>
<li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-916"><a href="http://twps.psadeaf.org/v3/about-psad/psad-hall-rules/">PSAD Hall Rules</a></li>
<li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917"><a href="http://twps.psadeaf.org/v3/about-psad/meetingevent-hall-rental-information/">Meeting/Event Hall Rental</a></li>
</ul>
</li>
<li id="menu-item-934" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-934"><a href="#">Get Involved!</a>
<ul class="menu">
<li id="menu-item-920" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-920"><a href="http://twps.psadeaf.org/v3/get-involved/">How to Get Involved</a></li>
<li id="menu-item-923" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-923"><a href="http://twps.psadeaf.org/v3/committees/">Committees</a></li>
<li id="menu-item-935" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-935"><a href="#">Programs</a>
<ul class="menu">
<li id="menu-item-915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-915"><a href="http://twps.psadeaf.org/v3/about-psad/programs/">Programs</a></li>
<li id="menu-item-928" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-928"><a href="http://twps.psadeaf.org/v3/about-psad/programs/asl-club/">ASL Club</a></li>
<li id="menu-item-930" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-930"><a href="http://twps.psadeaf.org/v3/about-psad/programs/movie-nights/">Movie Nights</a></li>
<li id="menu-item-931" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-931"><a href="http://twps.psadeaf.org/v3/reunion/">Evergreen State Public/State Schools and Colleges Deaf/HH Reunions</a></li>
</ul>
</li>
<li id="menu-item-929" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-929"><a href="http://twps.psadeaf.org/v3/get-involved/meetings/">Meetings</a></li>
<li id="menu-item-921" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-921"><a href="http://twps.psadeaf.org/v3/gallery/">Gallery</a></li>
<li id="menu-item-926" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-926"><a href="http://twps.psadeaf.org/v3/links/">Links/Resources</a></li>
<li id="menu-item-918" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-918"><a href="http://twps.psadeaf.org/v3/about-psad/newsletters/">Historical Newsletters</a></li>
</ul>
</li>
<li id="menu-item-927" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-927"><a href="http://twps.psadeaf.org/v3/donate/">Donate</a></li>
<li id="menu-item-936" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-936"><a href="#">Membership</a>
<ul class="menu">
<li id="menu-item-911" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-911"><a href="http://twps.psadeaf.org/v3/become-a-member/">Become a Member</a></li>
<li id="menu-item-922" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-922"><a href="http://twps.psadeaf.org/v3/member-reward-points/">Member Reward Points</a></li>
</ul>
</li>
<li id="menu-item-910" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-910"><a href="http://twps.psadeaf.org/v3/contact-us/">Contact Us</a></li>
<li id="menu-item-912" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-912"><a href="http://twps.psadeaf.org/v3/calendar/">Calendar</a></li>
</ul> </div>
</div>
<div class="psad-nav-button hide expanded" aria-hidden="true">
<button class="expanded button" type="button">
^ Navigation ^
</button>
</div>
</div>
</div>
Bellow是用于导航滚动效果的jQuery：
jQuery(window).scroll(function() {
var psad_scroll = jQuery(this).scrollTop();
var psad_nav = jQuery( ".psad-nav" );
var psad_nav_button = jQuery( ".psad-nav-button" );
function psad_show_nav() {
if (Foundation.MediaQuery.atLeast( "medium" )) {
psad_nav.show();
psad_nav_button.addClass( "hide" ) ;
}
}
function psad_hide_nav() {
if (Foundation.MediaQuery.atLeast( "medium" )) {
psad_nav_button.removeClass( "hide" );
psad_nav.hide();
}
}
if (psad_scroll >= 30) {
psad_hide_nav();
psad_nav_button.on({
click: psad_show_nav,
mouseenter: psad_show_nav
});
}
if (psad_scroll < 30) {
psad_show_nav();
}
});
现在我的问题是我创建了跳转链接，这些链接转到页面的网站导航和主要内容。现在，当选择跳过链接时，它会转到向下滚动到所选部分时弹出的导航按钮，而不是选择按钮链接到的部分。这意味着屏幕阅读器会读取粘贴到顶部的“导航”按钮，而不是跳过链接中选择的内容。我尝试将aria-hidden="true"添加到按钮并包含div但没有成功。如何在保持粘性导航的同时解决此问题？
以下是正文内容顶部的跳过链接的标记：
<div id="psad-skip-links" class="expanded" role="navigation" aria-label="Skip Links">
<a class="show-on-focus expanded button" href="#menu-menu-1">Skip to Navigation</a>
<a class="show-on-focus expanded button" href="#main">Skip to Content</a>
</div>