Zurb基金會4：在移動時移除固定/粘性的頂部酒吧？

Question

在桌面視圖中保持Zurb Foundation 4的頂部欄「固定」和/或「粘性」功能的最佳方式是什麼？擁有固定的頂級酒吧非常適合在大型設備上使用，但會浪費移動設備上寶貴的屏幕空間。

我真的很驚訝，它不會默認這樣做（或者至少有一個選項可以在移動設備上禁用）。

我快速的解決方案如下：

$(function() { 
    if (Modernizr.mq('only screen and (min-width: 768px)')) { 
     $('#header').addClass('fixed'); 
    } 
}); 

有一個可能更優雅的解決方案，但（和一個需要照顧的屏幕大小調整等）。

編輯：重新讀我的問題後，意識到這是非常不清楚。已更新。

Answer 1

您可以修改.fixed類，像這樣：

.fixed { 
    width: 100%; 
    position: relative; 
    @media #{$small} { 
    position: fixed; 
    top: 0; 
    left: 0; 
    } 
} 

這將顯示導航欄作爲固定的看法比手機大，那麼它應該是自由滾動移動。

Answer 2

也許我的回答太明顯了，但是您是否嘗試了移動設備的媒體查詢？

.top-bar { 
    display: none; 
} 

Answer 3

我不知道這是否是更優雅，但我想我會用.hide換小.show換小如出現在的基礎上模板的一些元素，我知道它意味着重複，但是，嘿，這可能是一個爲頂級酒吧提供更多移動友好佈局的機會。希望能幫助到你。