Событие при скролле и ширине экрана

Question

У меня есть хедер, элементы которого при скролле получают доп. css стили. Однако, нужно чтобы это условие работало только при ширине экрана/устройства < 920 пикселей.

Пробую выполнить if ($(window).scrollTop() > 40, $(window).width() < 920)— не работает. Задача в том, чтобы условие выполнялось для ширины 920 и меньше, не затрагивая имеющиеся стили. Помогите, пожалуйста.

function changecolor() {
    var scroll = $(window).scrollTop();
    if (scroll > 40) {
      $("#c1").css("color" , "#3a3a3a");
      $("#m2").css("background" , "#rgba(255,255,255,.8)");
      $(".c-color").css("color" , "#3a3a3a");
      $(".m-color").css("color" , "#3a3a3a");
    }
    else {
      $("#c1").css("color" , "#fff");
      $("#m2").css("background" , "rgba(255,255,255,0)");
      $(".c-color").css("color" , "#fff");
      $(".m-color").css("color" , "#f4f4f4");
    }
};

Answer 1

как-то так

 $(document).ready(function(){
   $(window).scroll(function(){
     if ( $(window).width() <920 ) {
       var scroll = $(window).scrollTop();
        if (scroll > 40) {
          $("#overhead").css("background" , "rgba(255,255,255,1)");
          $(".c-1").css("color" , "blue");
          $(".m-1").css("color" , "blue");
        }
        else{
          $("#overhead").css("background" , "grey");
          $(".c-1").css("color" , "red");
          $(".m-1").css("color" , "orange");
        }
      }
  });
});

БЛОГ НА HUSL

Событие при скролле и ширине экрана

Ответы (1 шт):