css - CSSとおそらくjQueryでスクロール時に色を変更するDiviの固定モバイルメニューを取得する方法は?

Question

私はすでに開始しており、スクロール時の高さを減らす0.4秒の簡単な移行を備えた固定モバイルメニューを動作させています。

これまでのところ、すべてCSSで完了しています。

コードの下部に背景色の遷移を追加しようとしましたが、そのビットは機能しません。

現在、トランジションは .et_mobile_menu を変更しようとしていますが、#mobile_menu と #et-top-navigation を作成しようとしましたが、すべて効果がありません。

私はこれを数日間続けてきましたが、役に立ちませんでした。これがどのように行われるかについての光は素晴らしいでしょう.フォーラムはすでにかなり徹底的に精査されています.

ライブ サイト:インテック ツール

CSS :

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
    /* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width: 980px){
  .et_header_style_left .et_fixed_header .et_mobile_menu {
     background-color: #f9c13a !important;
   }
      /* transition menu colour */
  .et_header_style_left .et_mobile_menu {
        -webkit-transition: background-color 0.4s ease;
        -o-transition: background-color 0.4s ease;
        transition: background-color 0.4s ease;
  }
}