CSS滚动时更改导航栏背景颜色

Question

我的导航栏有一个白色背景，但在登录页上它应该是透明的，当我向下滚动时它应该是白色的，在其他页面上它应该是白色的。

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

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

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");
      }
    });
  }
});

这里是我的navbar 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中将其设置为透明
如何使导航栏的背景色在登录页上透明？

Answer 1

您的HTML应该是：

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

因为它已经包含了navbar-trans类，所以它将保持透明。一旦用户滚动，javascript就会启动，并根据代码删除/addnavbar-trans类。

var landingPage = 'YOUR_LANDING_PAGE_URL';

function updateNavStyle() {
  if(landingPage.length > 0 && location.href.toLowerCase().indexOf(landingPage.toLowerCase()) >= 0) {
    var offset = $('#change_color').offset();
    var scroll_start = $(document).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");
    }
  }
}

$(document).ready(function() {
  var scroll_start = 0;
  var change_color = $('#change_color');

  if (change_color.length) {
    $(document).scroll(updateNavStyle);
    updateNavStyle(); // Note this.
  }
});

这里，除了在scroll上绑定updateNavStyle函数外，我还添加了一个DOM就绪后对它的调用。因此，一旦页面加载，该功能将执行一次，并根据滚动位置应用样式。

更新：

如果您的登录页是“索引”。html'，在希望此函数工作的地方，将其值写入变量landingPage。因此，该函数将不会在“关于”等其他页面中运行。html“或”联系人。html’。