javascript - 如何为屏幕宽度向现有的 javascript 函数添加额外的 if 语句？

Question

我有一段 Javascript 代码，我想在其中为 if 语句添加一条附加规则 - 如果屏幕宽度低于 767px，则保留 CSS 类属性“av_header_transparency” 下面是有问题的代码:

if (transparent) {
    if (st > 50) {
    //header.removeClass('av_header_transparency');
        av_change_class(header, 'remove', 'av_header_transparency');
    } else {
        //header.addClass('av_header_transparency');
        av_change_class(header, 'add', 'av_header_transparency');
    }
}

目前，如果向下滚动 50 像素，此代码将删除 CSS 类“av_header_transparency”，但我想将其保留在移动屏幕上。这可能吗？

问候

Answer 1

CSS 媒体查询非常适合:

@media screen and (max-width:767px) {

  header.someClass {
    /* styles for screeens up to 767px */
  }

}

@media screen and (min-width:768px) {

  header.someClass {
    /* styles for screeens larger than 768px */
  }

}