Question

我正在尝试使用基础中的“固定”类，以便在用户向下滚动时将我的topbar固定在顶部。使用它时，页面正文位于顶部导航栏后面。前3行不可见。我想通过在顶部创建一个边距或一些填充来简单地将其向下推。但实际上这不会起作用，因为顶部导航栏的高度不是静态的，它会响应窗口的宽度。

我的代码在这里： 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>

正如您所看到的那样，在缩小窗口时，顶部条的高度会增加。

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

Answer 1

解决了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的高度并相应地更新内容的边距。您可以将标记类更新为导航容器不那么通用的内容。

基础固定顶杆，如何处理偏移

1 个答案: