Question

我正在尝试包装此代码：

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". 
}

我遇到的问题是，如果窗口调整到980px以下的宽度，上面的代码将不会监听调整大小，无论如何都会运行。

Answer 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");
     }
   });

Answer 2

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

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

希望这有帮助。

Answer 3

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

在函数中包装代码。 noob

3 个答案: