1

我正在将 Zurb Foundation 4 用于网站，我已经使用过它，但我从未尝试过粘性或固定顶部栏类。

问题是，当我为导航包装器设置粘性或固定类时，在浏览器导航栏的高度呈现时变成双倍！（我使用容器是因为，根据文档“为了使顶部栏在滚动时保持固定，将其包装在 div class="fixed" 中”）

任何人都知道为什么顶部栏会随着这些类改变它的高度？我真的找不到解决办法！

这是代码：

<div class="contain-to-grid fixed"> 
      <nav class="top-bar">
         <ul class="title-area">
            <li class="name">
               <h1><a href="#">Title</a></h1>
            </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="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
         </ul>
         </section>
      </nav>
   </div>
4

2 回答 2

0

在您的自定义 CSS 中，添加以下内容：

.row{
    padding-top: 50px;
}

.top-bar {
    position: fixed;
    width: 100%;
    z-index: 100;
}

这应该会产生一个粘性标题，并带有正确的填充以允许内容在其下开始。

像往常一样开始您的内容<div class="row">content ... </div>

参考： http: //foundation.zurb.com/templates.php#

于 2013-10-16T16:14:55.213 回答
0

找到了解决方案：

似乎问题出在带有.contain-to-grid类的包装器 div 上。如果我删除它，我可以拥有一个完美工作的粘性/固定顶栏。

当我添加那个类时，我的顶部栏变胖了。在默认设置中，我发现：

.contain-to-grid { width: 100%; background: #111111; }
.contain-to-grid .top-bar { margin-bottom: 1.875em; }

所以我做了一个覆盖

.contain-to-grid .top-bar { margin-bottom: 0 !important; }

现在我的顶栏很粘，适应网格，又变薄了！

于 2013-10-17T08:10:15.983 回答