Chrome 中的粘滞菜单问题，它在其他浏览器上工作时不会粘在顶部

Question

这是网站发生的问题

www.nysafoundation.org

和仅在 chrome 上发生且仅在主页上发生 (index.php)

其他页面（团队/捐赠等）在所有浏览器中运行良好，甚至在 chrome 中也是如此。 主页在 Firefox 等其他浏览器中运行良好

它是有线的。我尝试了很多来识别它。如果我删除页面部分，它在 chrome 中可以正常工作。

所以我觉得 它与这些页面部分的 CSS 部分有关。

这可能不是最好的询问地点，但我没有其他选择。 HTML

    <div id="navigation-sticky-wrapper" class="sticky-wrapper" style="height: 95px;"><nav id="navigation" class="is-sticky">
<div class="container">
<nav style="display: block;"><ul id="menu" class="shadow"><li><a href="/activities">Activities</a></li>
<li><a href="/volunteer">Volunteer</a></li>
<li><a href="/reports">Reports</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#blog">About</a></li>
<li><a href="/team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown"><a data-target="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Donation &nbsp; <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/donation">Donate Now</a> </li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/donation/#exemption">Tax Benefit</a> </li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/notify">Notify</a> </li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/receipt">Download Receipt</a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</nav></div>

CSS

.sticky-wrapper {
    position: relative;
    z-index: 1000;
    margin-bottom: -95px !important;
}

.sticky-wrapper #navigation {
padding: 30px 0;
width: 100%;
z-index: 1000;
position: relative;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}




.sticky-wrapper.is-sticky #navigation,.is-sticky #navigation .dropdown-menu {
padding: 15px 0;
border-bottom: solid 4px rgba(255, 255, 255, .8);
width: 100%;
z-index: 1000;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}

Answer 1

我不是 100% 确定您的问题是什么，但我相信您的菜单不会一直停留在页面顶部。我在 chrome 上玩过网络检查器，我发现通过从 .sticky-wrapper 类中删除 position:relative 菜单保持在顶部。您的旧粘性包装器类如下所示：

.sticky-wrapper {
    position: relative;
    z-index: 1000;
    margin-bottom: -95px !important;
}

这是解决此问题的新粘性包装器类的外观：

.sticky-wrapper {
    z-index: 1000;
    margin-bottom: -95px !important;
}