一個粘性的頂部酒吧使頁面跳過滾動時通過Zurb基金會

Question

我使用Zurb基金會4框架爲我的網站。我想要一個位於頁眉下方的導航欄，當您滾動瀏覽頁面時，它會貼在頁面的頂部。這個效果很好，除了當頂欄粘貼到頁面頂部時，頁面內容跳躍〜45像素。效果可以在這個頁面上看到，雖然這是一個不同的導航元素：http://foundation.zurb.com/docs/components/magellan.html

有沒有辦法解決這個問題，還是我必須改變我的網站設計，以適應這個錯誤？

的文檔是在這裏：http://foundation.zurb.com/docs/components/top-bar.html

<div class="contain-to-grid sticky"> 
<nav class="top-bar"> 
     <ul class="title-area"> 
     <!-- Title Area --> 
     <li class="name"> 
      <h1><a href="/">Top Bar</a></h1> 
     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
     <ul class="left"> 
      <li class="divider"></li> 
      <li class="has-dropdown"><a href="/grid.php">Item 1</a> 

      <ul class="dropdown"> 
       <li><label>Level One</label></li> 
       <li><a href="#">Sub-item 1</a></li> 
       <li><a href="#">Sub-item 2</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Sub-item 3</a></li> 
       <li class="has-dropdown"><a href="#">Sub-item 4</a> 

       <ul class="dropdown"> 
        <li><label>Level Two</label></li> 
        <li class="has-dropdown"><a href="#">Sub-item 1</a> 

        <ul class="dropdown"> 
         <li><label>Level Three</label></li> 
         <li class="has-dropdown"><a href="#">Sub-item 1</a> 

         <ul class="dropdown"> 
          <li><label>Level Four</label></li> 
          <li><a href="#">Sub-item 1</a></li> 
         </ul> 
         </li> 
         <li><a href="#">Sub-item 2</a></li> 
         <li><a href="#">Sub-item 3</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Sub-item 4</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Sub-item 2</a></li> 
        <li><a href="#">Sub-item 3</a></li> 
        <li><a href="#">Sub-item 4</a> 
       </ul> 
       </li> 
       <li><a href="#">Sub-item 5</a></li> 
      </ul> 
      </li> 
      <li class="divider"></li> 
     </ul> 
     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="divider hide-for-small"></li> 
      <li><a href="#">Item 2</a></li> 
     </ul> 
     </section> 
    </nav> 

Answer 1

這似乎是在基金會4的JavaScript中的硬編碼的 「功能」。它不會僅僅阻止鏈接的默認行爲，它會自動強制鏈接重定向到#，這會導致瀏覽器跳轉到頁面的頂部。這似乎是故意的（更多的在一秒鐘內）。

現在唯一的選擇是只是不使用頂部欄組件並使用其他更可靠的基礎組件創建自己的導航。例如，您可以使用.sticky類和簡單定義新的<nav>元素以及其中所有必需的<ul>菜單項，輕鬆地構建自己的導航。

頂部酒吧有一個非常具體的使用設計...點擊「菜單」將使用JavaScript來揭示導航作爲頂部欄下的一個選項列。爲確保移動用戶可以滾動一大組選項，這會將窗口跳轉到頁面頂部，並刪除fixed行爲，直至關閉菜單。當頂部條從頁面頂部開始時，這種方式運行得很好，但當它不存在時會產生嚴重的影響（例如，滾動到頁面頂部可能會將菜單移出視圖）。

現在，這是純粹的意見了......但我真的不基金會的頂酒吧執行的粉絲。可用性測試顯示，將您的移動菜單放入頁腳並使用錨點鏈接到它們會更有效和方便用戶使用。您可以使用.hide-for-small來隱藏您的桌面菜單項和.show-for-small以顯示您自己的自定義，錨定的「菜單」鏈接...該菜單鏈接將錨定到您的頁腳中特定於移動設備的菜單（同樣，您可以使用.show-for-small來顯示） 。

長話短說：從可用性的角度來看，Top Bar是sl and不馴的，並且在您的用例中被破壞（按設計）。我建議建立:-)

Answer 2

自己粘菜單在此頁面：https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

我發現foundation.topbar.js，取決於頂欄是否粘添加填充body標籤的代碼或不是：

if ($('.sticky').length > 0) { 
    var distance = $('.sticky').length ? $('.sticky').offset().top: 0, 
     $window = $(window); 
     var offst = $('nav.top-bar').outerHeight()+20; 
    (".sticky").after("<div class='top-bar-sticky-padding'></div>"); 
    $window.scroll(function() { 
     if ($window.scrollTop() >= (distance)) { 
      $(".sticky").addClass("fixed"); 

- $（'body'）。css（'padding-top'，offst）; }

 else if ($window.scrollTop() < distance) { 
     $(".sticky").removeClass("fixed"); 

- $（'body'）。CSS（ '填充頂部'， '0'）; } }）; }

我不是一個JavaScript嚮導 - 但它好像不是將最高設置爲.top-bar的高度，而是直接將其設置爲.top-bar-sticky-padding的值，您可以使用媒體查詢來控制偏移量，而不是強制偏移頂部欄的大小。

我錯了嗎？我對「黑客攻擊」很緊張，但這似乎解決了我的問題。

Answer 3

如果您不需要，請刪除「粘性」類。爲我工作。

Answer 4

這個問題是固定的：https://github.com/zurb/foundation/issues/1993

答：

如果你不希望它跳到頂端指定數據選項：

<nav class="top-bar" data-options="scrolltop: false"> 

或初始化：

$(document).foundation('topbar', {scrolltop: false});