zurb-foundation - Zurb Foundation 4：在移动设备中移除顶栏固定/粘性？

Question

在桌面视图中保留 Zurb Foundation 4 顶栏上的“固定”和/或“粘性”功能但在移动视图中删除的最佳方法是什么？在较大的设备上拥有固定的顶栏非常棒，但会浪费移动设备上宝贵的屏幕空间。

我实际上很惊讶它默认不这样做（或者至少可以选择在移动设备上禁用）。

我的快速解决方案如下：

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

不过，可能有一个更优雅的解决方案（以及一个负责调整屏幕大小等的解决方案）。

编辑：之后重新阅读我的问题并意识到它非常不清楚。已更新。

score 1 · Accepted Answer

您可以像这样修改 .fixed 类：

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

这将显示导航栏对于大于移动设备的视图是固定的，然后它应该可以自由滚动移动设备。

score 0 · Accepted Answer

也许我的回答太明显了，但是您是否尝试过移动设备的媒体查询？

.top-bar {
    display: none;
}

score 0 · Accepted Answer

我不确定它是否更优雅，但我想我会使用.hide-for -small .show-for-small出现在基础模板的某些元素中，我知道这意味着重复，但是嘿，它可能为顶部栏提供更适合移动设备的布局的机会。希望能帮助到你。

3 回答 3