Как toggleClass при изменении размера окна?

Question

Я хочу иметь divs, который придерживается прокрутки, но останавливается внизу в конце родительского div, это отлично работает. И когда окно меньше 700 пикселей, я хочу удалить липкий класс, это отлично работает. Теперь проблема заключается в том, чтобы снова добавить липкий класс, когда окно больше 700. Как переключить эти классы, чтобы они появлялись снова, когда окно становится больше?

Вот скрипку: https://jsfiddle.net/m6jfyh9L/2/

Я использую библиотеку stickem.js здесь https://github.com/davist11/jQuery-Stickem/blob/master/jquery.stickem.js

Код:

$(document).ready(function() { 

    $('.container').stickem(); 

    var window = $(window).width(); 

    if (window<700) 
     $("div").removeClass("stickem"); 
     $("div").removeClass("stickem-container"); 
     $("div").removeClass("stickit"); 
     $("div").removeClass("stickit-end"); 

}); 

Answer 1

$(document).ready(function() { 

    $(window).resize(function() { 
    if(false == $('.selector').hasClass('sticky') && $(window).width() >= 700) { 
     $('.selector').addClass('sticky'); 
    } 

    if(true == $('.selector').hasClass('sticky') && $(window).width() < 700) { 
     $('.selector').removeClass('sticky'); 
    } 
    }); 
}); 

Еще не проверял. Просто убедитесь, что вы можете выбрать элемент, который хотите добавить или удалить свой липкий класс.

Answer 2

Попробуйте это:

$(window).on('resize',function(){ 
    if($(this).width()>700) 
     $('yourDiv').addClass('sticky'); 
    else 
     $('yourDiv').removeClass('sticky'); 
});