我可以根据窗口大小执行 javascript 吗？答案

【问题标题】：Can I execute javascript based on window size?我可以根据窗口大小执行 javascript 吗？
【发布时间】：2012-05-06 18:26:28
【问题描述】：

我有一个响应式网站，我在其中使用 javascript 创建粘性侧边栏。

当浏览器大小小于 768 像素时，我还使用媒体查询从多列布局更改为单列布局。

我需要弄清楚如何在单列布局中禁用粘性菜单脚本。从本质上讲，我需要脚本语句的媒体查询之类的东西。

这是我用来启用脚本的代码：

<script>
jQuery('#info').containedStickyScroll({
        duration: 0,
        unstick: false
    });
</script>

我可以添加什么东西让它只有在窗口为 768px 宽或更宽时才触发？

编辑：如果用户动态调整窗口大小，我正在寻找一种可行的解决方案。

【问题讨论】：

也相关：stackoverflow.com/questions/4811238/…

标签： javascript jquery responsive-design

【解决方案1】：

看看这个：

var targetWidth = 768;
if ( $(window).width() &gt;= targetWidth) {     
  //Add your javascript for screens wider than or equal to 768 here
  jQuery('#info').containedStickyScroll({
      duration: 0,
      unstick: false
  });
}
else {
  //Add your javascript for screens smaller than 768 here
  console.log(`am less than ${targetWidth}`)
}

【讨论】：

【解决方案2】：

试试这个。

$(function(){
     $(window).resize(function(){
         if($(this).width() >= 768){
             jQuery('#info').containedStickyScroll({
                 duration: 0,
                 unstick: false
             });
         }
      })
      .resize();//trigger resize on page load
});

【讨论】：

@MДΓΓ БДLL 这基于页面加载时的窗口大小；如果用户在加载页面后调整页面大小，有没有办法让它工作？
@MДΓΓБДLL - 我认为 OP 仅在宽度应为 768 时才需要，但 >= 应该更好。
IME 最好对调整大小处理程序进行去抖动处理，因为在调整窗口大小时可以很多触发此事件。我喜欢这个 jQuery 插件：benalman.com/code/projects/jquery-throttle-debounce/examples/…
@ShankarSangoli 谢谢。如果窗口开始很小并放大到 768 以上，则更新后的代码有效，但如果窗口开始很大并缩小到 768 以下，则更新后的代码无效。
如果窗口宽度减小到 768 以下，则if 条件将失败并且不会执行任何操作。如果你想在这种情况下做其他事情，那么有一个else 块并编写所需的代码。

【解决方案3】：

试试这个代码：

var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it

if (height < 768) {
  jQuery('#info').containedStickyScroll({
      duration: 0,
      unstick: false
  });
}

希望对您有所帮助。

【讨论】：