Как сделать добавление класса только при ширине экрана > 768px?

Question

[Bastax13]

Вот что получилось у меня: jsfiddle.net/ugnkc7wh
Как сделать добавление класса только при ширине экрана > 768px? Если убрать определение ширины (if self.screen + if screen.width>768), то все прекрасно работает.
Помогите новичку, где ошибка?

Comments

[riot26]

а не лучше это предоставить CSS-у?

Answer 1

[Иван Соломенников]

Можно послушать событие resize объекта window и использовать свойство innerWidth объекта window.

Данный код проверяет при загрузке страницы ширину внутренней области экрана, а также при возникновении события resize и добавляет/удаляет класс.

window.addEventListener("load", function () {

    if(window.innerWidth > 768) {
        $('.sidebar-block:last-child').addClass('sticky');
    } else{
        $('.sidebar-block:last-child').removeClass('sticky');
    }
    
    window.addEventListener("resize", function () {
        if(window.innerWidth > 768) {
            $('.sidebar-block:last-child').addClass('sticky');
        } else{
            $('.sidebar-block:last-child').removeClass('sticky');
        }
    });
});

Answer 2

[napa3um]

https://developer.mozilla.org/en-US/docs/Web/CSS/M...