0

使用 Foundation 4，我决定让我的网站的导航栏具有粘性。按照我找到的一些示例，我将我的部分包装在 a 中，并为其指定了“固定”和“包含网格”类。固定标签导致向导航栏添加底部填充等于应该是什么边距。当我使用 chrome 或 firefox 检查器时，我找不到负责执行此操作的 css。我在 CSS 中添加了一个新行来设置最大高度。这样做最终会删除用于抵消正文内容的边距。我觉得我不应该添加这个新的 CSS 规则。有没有人经历过这个，你是如何解决的？

<div class="contain-to-grid fixed">
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title Area -->
            <li class="name">
                <h1><a href="/" style="background-image: url(/Content/logos/logo_color_105x35.png); text-indent: -119988px; width: 105px; background-repeat: no-repeat; background-position: 50% 50%;">company</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <!-- Left Nav Section -->

            <!-- Right Nav Section -->
            <ul class="right">
                <li class="divider hide-for-small"></li>
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "RegisterLink" })</li>
                <li class="divider hide-for-small"></li>
                <li>@Html.ActionLink("Sign in", "SignIn", "Account", routeValues: null, htmlAttributes: new { id = "SignInLink" })</li>
            </ul>
        </section>
    </nav>
</div>

我添加了新的 CSS 规则
.contain-to-grid.fixed{
max-height:45px;
}

小提琴 http://jsfiddle.net/Emh8P/6/

4

1 回答 1

1

我把你的 html 扔进了一个 js bin。

看起来负责的 CSS 是 top-bar 元素上的 margin-bottom 。<nav class="top-bar">

如果您要将固定类而不是包含类放在导航上，它会将其固定到页面顶部，而我可以看到没有任何问题。 

<div class="contain-to-grid">
    <nav class="top-bar fixed">

这是一个 jsbin，我把它放在顶栏而不是包含到网格上。http://jsbin.com/ehekEBE/1/

如果这对您不起作用，您只需要摆脱margin-bottom:1.875em与顶部栏相关的那个。

修订

在查看了您发布的新 jsfiddle 之后，我对您所看到的行为有了更多的了解。当您打开导航菜单时，Foundation 所做的是将固定类从父元素移动到子元素。当这种情况发生时，导航本身的位置会失去粘性，因为它不再是固定的，与导航内部相关的边距也会被渲染。

如果你让你的导航两者都有position:fixed !important;，top:0 !important;那么它将保持固定在屏幕的顶部，并且不会以任何可见的方式改变边距。

希望有帮助。

http://jsbin.com/IGArABO/2/

于 2013-08-26T10:47:43.807 回答