Question

我正在使用 Zurb Foundation 5 ，我正在努力实现以下目标：

我有一个row，其中包含位于页面中间某处的搜索框。一旦用户向下滚动，我想坚持包含搜索框顶部的<div>。基础5中是否有内置类来执行此操作，如果没有，有什么替代方法可以执行此操作？请注意，我需要它响应，以便我不必指定从顶部到div的距离（滚动距离）。

Answer 1

我建议使用Magellan在Foundation 5中执行此操作。

您可以在页面中插入以下代码：

<div data-magellan-expedition="fixed">
  <div class="row" data-magellan-arrival="search">
    <div class="large-12 columns">
      <a name="search"></a>
      <div class="row collapse" data-magellan-destination="search">
        <div class="small-10 columns">
          <input type="text" placeholder="Search the database">
        </div>
        <div class="small-2 columns">
          <button class="button postfix expand">Go</button>
        </div>
      </div>
    </div>
  </div>
</div>

我已创建此example in CodePen

基金会5 Sticky Div

1 个答案: