Question

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

我使用了以下代码：Changing nav-bar color after scrolling?

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

这是我的代码：

的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;
}

我的导航栏只有

<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”或“contacts.html”。

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

1 个答案:

使用HTML

使用JS