Foundation fixed top bar,偏移怎么处理

Foundation fixed top bar, how to deal with the ofset

我正在尝试使用基础中的 'fixed' class 来在用户向下滚动时让我的顶部栏固定在顶部。 使用它时,页面主体位于顶部导航栏后面。 前 3 行不可见。我考虑过通过在顶部创建边距或一些填充来简单地将其向下推。但这实际上不起作用,因为顶部导航栏的高度不是静态的,它响应 window.

的宽度

我这里有代码: http://jsfiddle.net/ancv8bsw/1/

$(document).ready(function () {
    $(document).foundation();
    
})
<div class="contain-to-grid fixed">
    <nav class="top-bar" data-topbar data-options="is_hover: false">
        <ul class="title-area">
            <li class="name">
                <h1>
                    <a href="#"></a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <ul>
        <li>
            <a href="/ukih" target="_self">Home</a>
        </li>
        <li>
            <a href="/ukih/about" target="_self">About Us</a>
        </li>
        <li>
            <a href="/ukih/projects" target="_self">Projects</a>
        </li>
        <li>
            <a href="/ukih/investment" target="_self">Investments</a>
        </li>
        <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
                <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
                <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
                <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
            </ul>
        </section>
    </nav>
</div>
<div>test1</div><div>test2</div><div>test3</div>
<div>test4</div>
<div>test5</div><div>test6</div><div>test7</div><div>test8</div><div>test9</div><div>test10</div><div>test11</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div>

正如您在缩小 window 时看到的那样,顶部栏的高度会增加。

有没有办法解决这个问题而不在顶部创建静态边距?

用 JS 解决:

$(document).ready(function () {
updateContentOffset();
$(window).resize(function(){
    updateContentOffset();
});
function updateContentOffset() {
    var offset = $('.contain-to-grid.fixed').height();
    $('.content').css('margin-top',offset);
}});

http://jsfiddle.net/ancv8bsw/3/

此脚本查找容器的高度 div 并相应地更新内容的边距。您可以将您的标记 类 更新为对导航容器来说不太通用的标记。