如何在窗口调整大小时禁用 jQuery 插件

Question

我正在尝试实现窗口调整大小事件侦听器，以便我使用的 jScroll jQuery 插件不会在某些项目的滚动导致问题的较小屏幕上触发。

通过将我在这里读到的各种内容放在一起，这就是我想出的：

<script>    
    $(window).resize(function() {
        windowWidth = $(this).width();
        if (.windowWidth() > 602) {
            $(".sectionTitle").jScroll({speed : "slow",top : 50});
});

</script>

How to disable JavaScript in media query 是我的主要帮助来源，但仍然无法使用。任何帮助将不胜感激。

RE 的 cmets： 这是我在控制台中得到的：

Uncaught SyntaxError: Unexpected token 。 （指数）：113 2 未捕获的 SyntaxError：输入意外结束（索引）：1 GET http://ghost-mirror.org/notify_act.php net::ERR_NAME_NOT_RESOLVED jquery.js:5

当我不将 jscroll 代码包装在 resize 函数中时，.sectionTitle 会跟随用户在窗口中滚动，就像一个固定元素一样，直到它到达其容器的末尾。

我更新了 entiendo 所说的代码：

<script>    
$(window).resize(function() {
    var windowWidth = $(this).width();
    if(windowWidth > 602) {
        $(".sectionTitle").jScroll({speed : "slow",top : 50});
        }
  });
</script>

如果我可以让插件在大于 602 像素的窗口宽度上默认运行，并在小于 602 的窗口上默认禁用，我将非常感激。 （目前它只在我调整窗口大小时运行，所以如果我加载页面但不更改大小，则脚本不会运行）。

Answer 1

所以，这里有一个建议：

HTML：

 <div id="container">
     <div class="scroll">
     <h3>Page 1</h3>
     <p>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin
     This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.

     This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.

     With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.

     jScroll is open-source and can be downloaded from my GitHub repository at github.com/pklauzinski/jscroll. </p>
     <a href="example-page2.html">next page</a>
     </div>
 </div>

jQuery:

$(document).ready(function(){
var origElement = $('.scroll').clone(); //we're cloning the original element and will use that to replace the content of the div "container" whenever the window size is less than 602px

if($(window).width() > 602){
    $('.scroll').jscroll();
    }

$(window).resize(function(){
    if($(window).width() < 602){
        alert($(window).width());
       $('.scroll').remove();
       $('#container').html(origElement);
       }
    else{
         $('.scroll').jscroll();
        }
    });
});

这是一个小提琴：http://jsfiddle.net/6YXFu/3/