Foundation 5 Sticky Div

Question

Я использую Zurb Foundation 5 и я пытаюсь добиться следующего:

У меня есть row, который содержит строку поиска, расположенную где-то в середине страницы. Я хочу, чтобы палка<div>, которая содержит поле поиска сверху после того, как пользователь прокручивается к нему. Есть ли встроенный класс в фундаменте 5, чтобы сделать это, а если нет, то какой альтернативный способ это сделать? Обратите внимание, что мне нужно, чтобы он реагировал так, что мне не нужно указывать расстояние от вершины до div (расстояние прокрутки).

Answer 1

Я рекомендую использовать Magellan, чтобы сделать это в Фонд 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