断点下方的粘性导航未固定到顶部

Question

我是基金会的新手，我到处搜索这个答案，但找不到它。

尝试创建一个具有从页面中间开始的导航的页面。滚动时导航将粘在顶部。这很容易，就像一个魅力......

但是当你进入屏幕尺寸较小的页面时，我希望将“移动”菜单固定在顶部，而不仅仅是浮动页面。

我身边的div是：

<div class="contain-to-grid sticky">

希望有人知道我是如何做到这一点的。

Answer 1

几个选项，你可以使用媒体查询小屏幕，如：

@media only screen and (max-width: 40em) {
   .sticky {
      position: fixed !important;
      top: 0px !important;
   }
}

或者，当屏幕尺寸足够大时，您可以有条件地仅加载Magellan（或您正在使用的任何方法），例如

if($(window).width() > 670){
   // init sticky nav stuff here
}