Неправильно сравниваются значения в JS

193

28 апреля 2018, 17:47

Делаю простую проверку на ширину экрана для адаптации, но получается что-то не то, вот код:

    var width = +$(window).width();
    alert(width); //нормально выводит значение ширины окна
    if (width < 1024) { //не срабатывает в любом случае
        $('.fixed-1').css("position", "relative");
    }
    else{
        alert(width < 1024); //выводит всегда false
        var width_true = $('#menu2').width();
        $('.fixed-l').css("max-width", width_true);
        $('.fixed-l').css(" position", "fixed");
    }

Даже когда окно меньше 1024 пикселей - возвращает false. В чем дело?

Answer 1

Все должно работать. Вероятно, проблема в вашем таймере.
Используйте вместо таймера события:

$(window).on('DOMContentLoaded', () => { 
  $(window).on('resize', onResize);  
  onResize();  
}); 
 
function onResize() { 
  var width = $(window).width(),  
      test = $('#test');  
  if (width < 1024) 
    test.css('color', 'red'); 
  else 
    test.css('color', 'green'); 
  test.text('Ширина вьюпорта: ' + width);  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="test"></div>

Демо на JSbin

Answer 2

Оберните ваш код в обработчик события

$(window).resize(function(){
    var width = +$(window).width();
    alert(width); 
    if (width < 1024) { 
    $('.fixed-1').css("position", "relative");
    } else {
        alert(width < 1024); 
        var width_true = $('#menu2').width();
        $('.fixed-l').css("max-width", width_true);
        $('.fixed-l').css(" position", "fixed");
    }
});