jquery - 如何使用jQuery淡化滚动面板的背景图像？

Question

我尝试了下面的代码，但无法淡入位于滚动面板的.pane类中的背景图像。

$(".pane").scroll(function() {
  var y = $(".pane").scrollRight();
  if (y > 50) {
    $(".bg").fadeIn("slow");
  } else {
    $(".bg").fadeOut("slow");
  };
});

这是我的HTML代码
我使用pane类来包含我的背景图像，而driver类包含要滚动的div。我希望在滚动时背景图像会褪色。

<div class="row disp pane bg">
  <h5 class="text">Check Now</h5>
  <h4 class="text1">Popular Clicks</h4>
  <div id="driver" class="dis bord" style="margin-left:1080px;">
    <img src="images/wrogn.jpg" class="image" alt="women">
    <p class="text-muted brand"><strong>WROoGN</strong></p>
    <h5 style="line-height:0px"><strong>&#8377;1,660</strong></h5>
    <table>
      <tr>
        <td>
          <p class="text-muted" style="font-size:11px">&#8377;<del>2,660 </del></p>
        </td>
        <td>
          <p class="text-danger" style="font-size:10px">&nbsp;40% OFF
            <p>
        </td>
      </tr>
    </table>
  </div>

Answer 1

首先，您应该使用scrollLeft()并且不必对.bg应用淡入淡出，这与.pane是同一个元素，因为您只需禁用该元素，它将消失，然后您就不能再在其上滚动。
相反，我建议您创建另一个具有绝对位置和低z索引的元素，该元素将覆盖.pane，并对其应用淡入度：

$(".pane").scroll(function() {
  var y = $(".pane").scrollLeft();
  if (y > 50) {
    $(".bg").fadeIn("slow");
  } else {
    $(".bg").fadeOut("slow");
  };
});

.pane {
  overflow: auto;
  position: relative;
}

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(https://lorempixel.com/800/800/);
  background-size: cover;
  z-index: -1;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row disp pane">
  <div class="bg"></div>
  <h5 class="text">Check Now</h5>
  <h4 class="text1">Popular Clicks</h4>
  <!--<h3 class = "text">Clicks</h3>
                    <div class = "parallax dis">
                        <img src = "images/parallax.jpg" alt = "trends" class = "trend">
                    </div>-->
  <div id="driver" class="dis bord" style="margin-left:1080px;">
    <img src="images/wrogn.jpg" class="image" alt="women">
    <p class="text-muted brand"><strong>WROoGN</strong></p>
    <table>
      <tr>
        <td>
          <p class="text-danger" style="font-size:10px">&nbsp;40% OFF
            <p>
        </td>
      </tr>
    </table>
  </div>