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

Question

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

我使用的代码来自：Changing nav-bar color after scrolling?

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

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 中将其设置为透明，该类的背景颜色仍然是白色？
如何使导航栏的背景颜色在着陆页上透明？

Answer 1

使用 HTML

您的 HTML 应该是：

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

由于它已经包含navbar-trans 类，它将保持透明。用户滚动后，javascript 将启动，并根据代码删除/添加 navbar-trans 类。

使用 JS

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

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

更新：

如果您的目标网页是“index.html”，您希望此功能在其中发挥作用，请将其值写入变量landingPage。所以该函数不会在“about.html”或“c​​ontacts.html”等其他页面中运行。