Question

我试图使我的菜单保持在浏览器的顶部，除了在移动设备上（即#header低于400px），这是我的代码，当我检查JSHint时，它不会抛出任何错误，但是同时还没有工作

$(document).ready(function () {
        if ($('#header').width() > 400) {
            $("#menu").sticky({
                topSpacing: 0
            });
        }
    });
    $(document).ready(main);

如果有人有想法，真的可以使用一些帮助吗？

Answer 1

你应该试试这个：

$(document).ready(function () {
  if ($('#header').css('width') > 400) {
    $("#menu").sticky({
      topSpacing: 0
    });
  }
});

Answer 2

感谢大家的帮助，让它立即运行，正确的代码是

$(document).ready(function(){
     if($(window).width() > 450){
         $("#main").sticky({topSpacing:0});
     }
   });

这里是一个例子的小提琴

http://jsfiddle.net/n8L301jb/6/

Answer 3

这是一个CSS解决方案。您可以使用@media (min-width: 400px)指定仅在窗口宽度为400或更大时才适用的特定规则。

CSS：

@media (min-width: 400px) {
    #menu {
        position: fixed;
        top: 0px;
    }
}

这里是fiddle。

使我的菜单保持在浏览器的顶部，除了在移动设备上（即#header低于400px）

3 个答案: