gpt4 book ai didi

css - Foundation fixed top bar,偏移怎么处理

转载 作者:太空宇宙 更新时间:2023-11-04 12:07:06 25 4
gpt4 key购买 nike

我正在尝试使用 foundation 中的“固定”类,以便在用户向下滚动时将顶部栏固定在顶部。使用它时,页面主体位于顶部导航栏后面。前 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>

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

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

最佳答案

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

关于css - Foundation fixed top bar,偏移怎么处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29307129/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com