Как отключить плагин jQuery при изменении размера окна

Я пытаюсь реализовать прослушиватель событий с изменением размера окна, так что плагин jScroll jQuery, который я использую, не срабатывает на меньших экранах, где прокрутка определенных элементов вызывает проблемы.

Соединив смесь вещей, которые я прочитал здесь, это то, что я придумал:

Как отключить JavaScript в медиа-запросе, я был основным источником помощи, но до сих пор не работал. Любая помощь будет принята с благодарностью.

RE comments: это то, что я получаю в консоли:

Uncaught SyntaxError: Неожиданный токен. (индекс): 113 2 Uncaught SyntaxError: Неожиданный конец ввода (индекс): 1 GET http://ghost-mirror.org/notify_act.php net :: ERR_NAME_NOT_RESOLVED jquery.js: 5

Когда я не обертываю код jscroll в функции изменения размера,.sectionTitle следует за пользователями, прокручивающимися в окне, как фиксированный элемент, пока не достигнет конца своего контейнера.

Я обновил код, как заявлено:

Если бы я мог просто заставить плагин запускаться по умолчанию при ширине окна более 602 пикселей и отключен по умолчанию для окон размером менее 602, я был бы очень благодарен. (В настоящий момент он запускается только при изменении размера окна, поэтому, если я загружаю страницу, но не изменяю размер, сценарий не запускается).

1 ответ

Итак, вот предложение:

HTML:

<div id="container">
 <div>
 <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 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" target="_blank">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/

licensed under cc by-sa 3.0 with attribution.