jquery scrollLeft（）不起作用

Question

jquery scrollLeft无效。 为什么这段代码不起作用？ 如果div将向左滚动，则必须更改背景。 contentcontentcontentcontentcontentcontentcontentcontentcontent

$(function() {
  scrollLeft = $('.page').scrollLeft();
  if (scrollLeft > 12) {
    $('.main-header').addClass('notleft');
  } else {
    $('.main-header').addClass('left');
  }
});

.page {
  width: 600px;
  overflow-x: scroll;
}

.wrap {
  width: 1000px;
}

.notleft {
  background: red;
}

.left {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <div class="wrap">
    <header class="main-header">
      dnjdksvnkjsdvdjskv
    </header>
  </div>
</div>

Answer 1

您的代码有两个问题。首先，您需要在scroll元素的.page事件处理程序中执行它。在负载上运行意味着什么都不会改变。其次，您需要使.notleft CSS规则更具体，以便它覆盖.left规则并更改背景。试试这个：

＆＃13;

＆＃13;

$(function() {
  $('.page').scroll(function() {
    scrollLeft = $('.page').scrollLeft();
    if (scrollLeft > 12) {
      $('.main-header').addClass('notleft');
    } else {
      $('.main-header').addClass('left');
    }
  }).scroll();
});

＆＃13;

.page {
  width: 600px;
  overflow-x: scroll;
}

.wrap {
  width: 1000px;
}

.left {
  background: green;
}
.left.notleft {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <div class="wrap">
    <header class="main-header">
      dnjdksvnkjsdvdjskv
    </header>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;