固定標題與墨水框架

Question

我想讓我的標題與the Ink framework（CSS/JS）固定，所以它不會在頁面上移動，而滾動，我似乎無法如此。

HTML：

<div id="topbar"> 
    <nav class="ink-navigation ink-grid hide-all show-large"> 
     <ul class="menu horizontal flat blue"> 
      <li> 
       <a href="#">Home</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item</a> 
      </li> 
      <li> 
       <a href="#">Menu item<i class="icon-caret-down"></i></a> 
        <ul class="submenu"> 
         <li> 
          <a href="#">Submenu item</a> 
         </li> 
         <li> 
          <a href="#">Submenu item</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 
     <nav class="ink-navigation ink-grid hide-all show-medium show-small"> 
      <ul class="menu vertical flat blue"> 
       <li> 
        <a class="logoPlaceholder push-left" href="#" title="Site Title">Home</a> 
        <button class="toggle push-right" data-target="#topbar_menu" id="toggleVisibility"> 
         <span class="icon-reorder"></span> 
        </button> 
       </li> 
      </ul> 
      <ul class="menu vertical flat blue hide-all" id="topbar_menu"> 
       <li> 
        <a href="#">Menu item</a> 
       </li> 
       <li> 
        <a href="#">Menu item</a> 
       </li> 
       <li> 
        <a href="#">Menu item</a> 
       </li> 
       <li> 
         <a href="#">Menu item</a> 
       </li> 
       <li> 
         <a href="#">Menu item</a> 
       </li> 
       <li> 
         <a href="#">Menu item</a> 
       </li> 
       <li> 
         <a href="#">Menu item</a> 
       </li> 
       <li> 
         <a href="#">Menu item</a> 
       </li> 
       <li class=""> 
         <a class="toggle" data-target=".submenu" href="#">Menu item<i class="icon-caret-down"></i></a> 
         <ul class="submenu hide-all dropdown"> 
          <li> 
           <a href="#">Submenu item</a> 
          </li> 
          <li> 
           <a href="#">Submenu item</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </nav> 
      <div class="border"> 
      </div> 
     </div> 

我看，並試圖切換與周圍的CSS包，但無法得到它去。

任何幫助，將不勝感激！

Answer 1

你使用的是最新版本，或者你使用的是github的源代碼？

在上一個版本中，我們有一個bug，如果元素寬於視口寬度的90％，它就不起作用。

從https://github.com/sapo/Ink/tree/develop/dist和使用獲得最後的構建：

<div id="topbar" data-offset-top="0" class="sticky" data-activate-in-layouts="large,medium,small"> 
.... 

屬性「數據激活式的佈局」是可選的，使其在所選擇的視口大小的工作。