0

我在这里有一个正在开发的网站：http: //www.mudquarters.com

如果您在移动设备上查看它或将窗口大小调整到断点，您将获得菜单切换图标。单击它后，它会滚动到适当的锚点，但是它会丢失其“固定”类，并且它还在页面顶部保持打开状态。奇怪的是，锚点会补偿顶部栏的 75px 高度，即使它仍然位于页面顶部。使用“粘性”时，我遇到了同样的错误。

我希望顶部栏在滚动到锚点时保持固定并折叠。

这是我的代码：

HTML

<div class="fixed">
    <nav class="top-bar">
        <ul class="title-area">
            <li class="small-8 large-12 logo-container"><a href="#"><img src="img/MudQuarters_Logo.png"></a></li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

    <section class="top-bar-section">
        <ul class="right">
            <li><a href="#brand">BRAND</a></li>
            <li><a href="#lifestyle">LIFESTYLE</a></li>
            <li><a href="#online">ONLINE</a></li>
            <li><a href="#stores">IN STORES</a></li>
            <li><a href="#trenches">IN THE TRENCHES</a></li>
            <li><a href="#team">TEAM</a></li>
            <li><a href="#opportunity">OPPORTUNITY</a></li>
        </ul>
    </section>
    </nav>
</div>

CSS 覆盖

.top-bar {
overflow: hidden;
height: 75px;
line-height: 75px;
position: relative;
background: #000000;
padding: 0 20px; }

.top-bar.expanded {
background-color: #000000; }
.top-bar.expanded .title-area {
background: #000000; }
.top-bar.expanded .toggle-topbar a {
color: #FFFFFF; }
.top-bar.expanded .toggle-topbar a span {
-webkit-box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF; }

.logo-container {
line-height: 75px; }

.top-bar-section li a:not(.button) {
line-height: 75px;
padding: 0px 20px 0px 0px;
background: #000000; }

我没有对 Foundation 的默认 JS 文件进行任何更改。

4

0 回答 0