Question

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

如果您在移动设备上查看它或将窗口重新调整为断点，您将获得菜单切换图标。单击它后，它会滚动到相应的锚点，但它会丢失其“固定”类，并且它仍然在页面顶部打开。奇怪的是，即使它保持在页面的顶部，锚也能补偿顶栏的75px高度。使用“sticky”时我得到了同样的错误。

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

这是我的代码：

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文件进行任何更改。

基础顶栏在移动断点处不会崩溃或保持粘性

0 个答案: