javascript - 不确定如何定义函数并在 javascript 中调用它

Question

查看我的 fiddle ，它是为了使 navbar 响应，这只是我一起破解的东西，因为我想不出更好的方法来使品牌和导航文本在中间对齐并改变它们的大小响应。

https://jsfiddle.net/ybarpz3x/10/

我基本上在文档就绪函数中有这个，

function changeSize() {
    var navHeight = $("navmenu").outerHeight(true);
    var fromTop = $('this').scrollTop()+navHeight; 

    $("nav div a").css({"height" : navHeight + "px","line-height" : navHeight + "px"});

    if (fromTop > navHeight) {
        $("nav li").addClass("top-menu-collapsed");
    }
    else if (fromTop <= navHeight) {
        $("nav li").removeClass("top-menu-collapsed");
    }
}; 

changeSize();

然后里面有一个 window.scroll，它只是在滚动时运行 changeSize()。所以 changeSize() 在加载时运行，然后在滚动时运行。

但我不认为我做对了......？

如果有人能很容易地分辨出来。请让我知道:)

仅供引用，在 jsfiddle 上预览窗口很小，我还没有为导航制作 col-sm，谢谢。

Answer 1

如果你想在分辨率 < 800px 上有一个全宽居中的导航栏，那么使用媒体查询来实现:) 这是你编辑的媒体查询:

@media (max-width: 800px) {
  #options #big-list ul {
    list-style-type: none;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    padding: 0; } 

    .myleisure a {
      width: 100%;
      text-align: center;
      padding-left: 0;
    }

    #thatnav li {
      width: 100%;
      text-align: center;
    }
}

这是 fiddle : https://jsfiddle.net/s2hg14Lq/