我的导航栏有白色背景，但它在着陆页上应该是透明的，向下滚动时是白色的，在其他每个页面上都是白色的。

我使用的代码来自： 滚动后更改导航栏颜色？

编辑：
所以我在下面的答案中添加了一个小提琴，但不知何故它不起作用

https://jsfiddle.net/jy6njukm/

这是我的代码：

javascript：

$(document).ready(function(){
  var scroll_start = 0;
  var change_color = $('#change_color');
  var offset = change_color.offset();
  if (change_color.length){
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        // the white normal navbar
        $(".navbar-add").removeClass("navbar-trans");
      } else {
        // what the users sees when he lands on the page
        $(".navbar-add").addClass("navbar-trans");
      }
    });
  }
});

这是我的导航栏css:

.navbar-fixed {
  position: fixed;
  height: 70px;
  padding: 0px 30px;
  left: 0px;
  top: 0px;
  z-index: 50;
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
}
.navbar-trans {
  background-color: transparent !important;
  box-shadow: none !important;
}

我的导航栏 html 中只有

<div class="navbar-fixed navbar-add">
.....
</div>

我的 home.html.erb 中有

<div class="container-fluid banner bg-picture" id="change_color" 
  style="background-image: linear-gradient(-225deg, rgba(0,0,0,0.2) 0%, 
  rgba(0,0,0,0.35) 50%), url('<%= asset_path('banner_logo.jpeg') %>')">
</div>

这样还算可以，但现在的问题是，每次我刷新页面时，导航栏仍然是白色的，只有我向上滚动到页面顶部时，它才会变成透明的。但是当我向下滚动时，它会变成白色，就像我想要的那样。

我检查了页面，每次刷新时，类的背景颜色仍然是白色的，即使我在 javascript 中将其设置为透明？
如何才能使我的导航栏的背景颜色在我的着陆页上透明？