查看我的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,谢谢。

最佳答案

如果您想在重新分辨率

@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;
    }
}


这是小提琴:
https://jsfiddle.net/s2hg14Lq/

关于javascript - 不确定如何定义函数并在javascript中调用它,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38169558/

10-09 16:51