JS: Удаление класса из раздела

Question

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

Например, у меня есть 3 секции:

<section class="bg1 parallax"></section> 
<section class="bg2 parallax"></section> 
<section class="bg3 parallax"></section> 

Parallax класс не описанных в CSS, он будет добавлен только позволить JavaScript знать, который должен быть включен раздел параллакса.

Мой вопрос:

ли кто-то получил сценарий, который может удалить класс «параллакс», если ширина экрана меньше, чем, например: 1280px?

Если ширина больше, чем 1280px

<section class="bg1 parallax"></section> 

В противном случае

<section class="bg1"></section> 

Answer 1

Я не проверял, но это должно поставить вас в правильном направлении ...

window.onresize = function(){ // may not be the window object 
    if (screen.width < 1280) { // many ways of detecting screen width 
     var sections = document.querySelectorAll("section"); // create array of all section elements 
     for (var i = 0; i <= sections.length-1; i++) { // loop through them 
      sections[i].classList.remove("parallax"); // remove their parallax class 
     }; 
    }; 
}; 

Answer 2

Это видно мс немного взломанный, но вы можете сделать что-то вроде:

// closure so we don't pollute global scope. This should be run at the bottom of the page so that it can find all of the parallax elements on the page 
(function(){ 
    var previous_width = 0; 
    var cutoff = 1280; 
    var $parallax_elements = $('.parallax'); 
    function check_width() { 
     var current_width = document.body.clientWidth; 
     // if the document has gone from narrow to wide, re-enable parallax 
     if (current_width > cutoff && previous_width <= cutoff) { 
      $parallax_elements.addClass('parallax'); 
     } 
     // if the document has gone from wide to narrow, disable parallax 
     else if (current_width <= cutoff && previous_width > cutoff) { 
      $parallax_elements.removeClass('parallax'); 
     } 
     // store the current width for the next check 
     previous_width = current_width; 
    } 

    // run it every time the window resizes 
    $(window).resize(check_width); 

    // run it once to initialize 
    check_width(); 
})(); 

Answer 3

Пробовал это в консоли и, похоже, работает.

if(window.innerWidth < 1280){ 
    var parallaxes = document.getElementsByClassName('parallax'); 
    while(parallaxes[0]){ 
     parallaxes[0].classList.remove('parallax'); 
    } 
}