Question

我正在使用Zurb Foundation 4作为网站，我已经使用过它，但我从未尝试过粘性或固定的topbar类。

问题在于，当我将粘性或固定类设置为我的导航包装时，在浏览器中导航时导航栏的高度变为双倍！（我使用一个容器，因为，从文档中“要使顶部栏在滚动时保持固定，请将其包装在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>

Answer 1

在自定义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#

Answer 2

找到解决方案：

似乎问题是包含.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; }

现在我的顶栏是粘性的，调整到网格，再次变薄！

Zurb Foundation 4顶杆固定/粘性高度问题

2 个答案: