将代码包装在函数中。菜鸟在这里答案

【问题标题】：wrap code in a function. noob here将代码包装在函数中。菜鸟在这里
【发布时间】：2015-11-07 00:40:13
【问题描述】：

我正在尝试包装此代码：

if($(window).width() > 980) {
   $(window).on("scroll", function() {
      if($(window).scrollTop() > 20) {
        //add black background
        $(".x-navbar").addClass("active");
        $(".x-navbar .desktop .x-nav li  a").addClass("small-bar");
      } 
      else {
        //remove background
        $(".x-navbar").removeClass("active");
        $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
      }
   });
}

在一个函数中，这样我就可以在 980px 宽度下禁用它。

我想要达到的目标是这样的：

如下创建一个函数：

navBar = function () {
     // the whole code goes here.
}

然后在 980px 宽度下的移动设备中“禁用”它，如下所示：

if($(window).width() < 980) {
    // DON'T run the funcion called "navBar". 
}

我遇到的问题是，如果窗口的宽度被调整到 980 像素以下，上面的代码将不会监听调整大小，它会继续运行。

【问题讨论】：

我无法尝试，因为如果我将整个代码包装到 navBar 中，现在什么都不会发生......
看我的回答我觉得会有所帮助

标签： javascript jquery html css function

【解决方案1】：

正如我在评论中提到的

$(window).on("scroll resize", function() {
     if($(window).width() > 980) {
      if($(window).scrollTop() > 20) {
        //add black background
        $(".x-navbar").addClass("active");
        $(".x-navbar .desktop .x-nav li  a").addClass("small-bar");
      } 
      else {
        //remove background
        $(".x-navbar").removeClass("active");
        $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
      }
     }else{
         // if window width < 980
         //remove background
        $(".x-navbar").removeClass("active");
        $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
     }
   });

【讨论】：

看起来不错！但是我怎么说如果窗口宽度
@PaoloMangia 答案已更新 .. 你应该在调整大小后删除类

【解决方案2】：

您可以注册一个在 window.resize 方法被触发时将被调用的函数。

$(window).resize(function () {
    //Here you can check the width
});

希望这会有所帮助。

【讨论】：

【解决方案3】：

这是因为一旦你实例化了一个监听器，在你明确移除它之前它不会被移除。查看 jQuery 的 off function 以删除侦听器。然后，您可以根据窗口大小在off() 和on() 之间切换。

【讨论】：