位于页面顶部时的不同导航栏颜色答案

【问题标题】：Different Nav Bar Color when it is at the top of Page位于页面顶部时的不同导航栏颜色
【发布时间】：2016-03-09 17:15:22
【问题描述】：

我在这里有我的 HTML 导航栏。它目前以白色背景着色，并在我滚动时固定在页面顶部。但是，我希望它最初是透明的/仅当它位于页面顶部时才保持透明，然后它在向下滚动时变为白色背景。我应该如何在 JQuery 中实现这一点？

        <header id="header" class="alt">
            <h1><a href="index.html">Company Namez</a></h1>
            <a href="#one">Features</a>
            <a href="#two">About us</a>
            <a href="#three">Team</a>
            <a href="#four">Contact Us</a>
        </header>

【问题讨论】：

change div color after scrolling 15% down with jquery的可能重复
我在这里回答了一个类似的问题：Changing nav-bar color after scrolling?

标签： javascript jquery html css

【解决方案1】：

你可以通过添加 jquery addClass() 和 removeClass() 来实现，看看下面的代码。

$(document).scroll(function() { 
   if($(window).scrollTop() != 0) {
     $('#header').addClass("navBgcolor");
   }
   else {
   	 $('header').removeClass("navBgcolor");
   }
});

header#header{
  margin: auto;
  text-align:center;
  position: fixed;
  width: 100%;
}

div.content{
  height : 500px;
}

.navBgcolor{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header id="header" class="alt">
  <h1><a href="index.html">Company Namez</a></h1>
  <a href="#one">Features</a>
  <a href="#two">About us</a>
  <a href="#three">Team</a>
  <a href="#four">Contact Us</a>
</header>
<div class="content"></div>

【讨论】：

【解决方案2】：

https://jsfiddle.net/tdmr4gt9/

$(document).scroll(function() { 
   if($(window).scrollTop() === 0) {
     $('header').css("background-color", "rgba(255, 255, 255, 0)")
   }
   else {
     $('header').css("background-color", "rgba(255, 255, 255, 1)")
   }
});

【讨论】：