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

Javascript Chrome中的粘滞菜单存在问题,因为它在其他浏览器上工作时不会粘在顶部,javascript,jquery,html,css,google-chrome,Javascript,Jquery,Html,Css,Google Chrome,这是网站上正在发生的一个问题 和仅在chrome上发生,并且仅在主页上发生(index.php) 其他页面(团队/捐赠等)在所有浏览器中都能正常工作,甚至在chrome中也能正常工作。 主页在Firefox等其他浏览器中运行良好 有点像有线电视。我做了很多努力来识别它。如果我删除页面的部分,它在chrome中工作良好 所以我觉得这与那些页面部分的CSS部分有关。 .sticky-wrapper { position: relative; z-index: 1000; m

这是网站上正在发生的一个问题

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

其他页面(团队/捐赠等)在所有浏览器中都能正常工作,甚至在chrome中也能正常工作。 主页在Firefox等其他浏览器中运行良好

有点像有线电视。我做了很多努力来识别它。如果我删除页面的部分,它在chrome中工作良好

所以我觉得这与那些页面部分的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;
}

这可能不是一个可以问的地方,但我没有其他选择。 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>

我不是100%确定你的问题是什么,但我相信你的菜单并不是一直贴在页面的顶部。我在chrome上玩过web inspector,我发现通过从.sticky包装类中删除position:relative,菜单保持在顶部。旧的sticky包装器类如下所示:

.sticky-wrapper {
    position: relative;
    z-index: 1000;
    margin-bottom: -95px !important;
}
要解决此问题,新的粘性包装器类应该是这样的:

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

有什么问题?您需要更清楚地回答您的问题。@celt sticky menu在chrome中无法正常工作。请检查屏幕截图附件请在问题中包含代码不要要求检查某些网站,这些网站后来已修复,那么问题对未来毫无用处users@sedhuait当我们不知道你希望它如何工作时,“它不能正常工作”并没有多大帮助。@Andy:抱歉会解决很多问题。成功了。如果可能的话,你能解释一下它在其他浏览器中是如何工作的吗?甚至chrome中的其他页面也是如何工作的?一些浏览器处理CSS的方式不同,因此这可能只是chrome的一个特定问题。