jQueryを使用してスクロールパネルの背景イメージをフェードインするにはどうすればよいですか？

Question

私は以下のコードを試しましたが、スクロールパネルの.paneクラスにある背景イメージをフェードアウトできません。ここで

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

私は私の背景画像とドライバクラスを収容するためのウィンドウクラスを使用しています同じ のための私のHTMLコードをスクロールする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()を使用する必要がありますし、あなたは、単にこの要素を無効になりますし、それは、あなたはもうそれをスクロールすることができます消えませんので.paneと同じ元素である.bgにフェードを適用する必要はありません。

代わりに、私は絶対位置と.paneをカバーし、あなたがそれにフェードを適用する低Zインデックスと他の要素を作成することをアドバイス：

$(".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>