Question

我的HTML Nav Bar在这里。它当前以白色背景着色，并在滚动时固定在页面顶部。但是，我希望它最初是透明的/仅在它位于页面顶部时保持透明，然后在向下滚动时变为白色背景。我应该如何在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>

Answer 1

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

Answer 2

你可以通过添加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 个答案: