Javascript使div在滚动时消失

Question

您好我正在尝试在我的网站上建立一个通知系统，以便可以在div上向右滚动以解除它。这是我的代码：

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.fade {
    height: 300px;
    width: 300px;
    background-color: #d15757;
    color: #fff;
    padding: 10px;
}
.container1 {width: 300px; height: 300px; overflow: auto; }
.container2{width: 2000px; }
</style>
<div class="container1">
    <div class="container2">
        <div>
            <div class="fade">
                Scroll down i will become invisible
            </div>
        </div>
    </div>
</div>
<script>
$(window).scroll(function() {

    if ($('div.container1').scrollLeft()>0)
     {
        $('.fade').fadeOut();
     }
    else
     {
      $('.fade').fadeIn();
     }
 });
</script>

唯一的问题是它不起作用。请随时在评论中要求澄清。