Question

我有一个自适应网站，我正在使用javascript创建一个粘性侧边栏。

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

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

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

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

我可以添加一些内容，只有在窗口宽度为768px或更宽时才会触发它吗？

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

Answer 1

试试这个。

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

Answer 2

试试这段代码：

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

希望有所帮助。

Answer 3

检查一下：

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}`)
}

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

3 个答案: