Zurb Foundation 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-for-small .show-for-small ，如某些元素中所示在基础模板上，我知道它意味着重复，但是，嘿，这可能是一个更好的移动友好布局的顶级酒吧的机会。希望它有所帮助。