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

あなたのコードでは、2つの問題があります。まず、.page要素のイベントハンドラscroll内で実行する必要があります。ロード時に実行すると、何も変わらないことを意味します。次に、.leftルールを無効にしてバックグラウンドを変更するように、CSSルールをより具体的にする必要があります（.notleft）。 [ `.scrollLeft（）`]（https://api.jquery.com/scrollLeft/）

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

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

 
.wrap { 
 
    width: 1000px; 
 
} 
 

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

<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>