スクロール時にナビバーの背景色が変わるシンプルなjQuery

Question

ナビバーをスクロールダウンした際に、背景色が変わるjQueryを書いています。
ruby on rails 5がベースで、その中のjQueryの話になります。

起きている問題

一度スクロールダウンして、スクロールアップすると、意図した通りに背景色が変化します。
問題は、リフレッシュした際やページ偏移した際に、スクロールダウンした時の背景色が、スクロールダウンする前から適用されてしまうという問題です。
以下コードの通り、具体的には、スクロールダウンすると背景色が赤に変わるのですが、ページ偏移じには最初から背景色が赤になっています。

書いたコード

$(document).on("turbolinks:load", function(){
  $(document).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 10) {
      $("#header").addClass("topHeader");
    } else {
      $("#header").removeClass("topHeader");
    }
  });
})

.topHeader{
    background-color:red !important;
}

<nav id="header" class="topHeader navbar fixed-top navbar-expand-lg py-3 navbar-original">

内容割愛

</nav>

Answer 1

htmlのclassに最初からtopHeaderを記載していることが原因でした。おさわがせしました