在不同的#page上导航字体颜色会发生变化

Question

所以我建立了一个单页网站。在＃page1和＃page3上一切都很好，但我希望#navbar锚文本颜色在滑动到＃page2时变为白色。我怎么能这样做？这是与导航栏和＃page2

相关的所有内容

<div id="nav">
     <a href="#home">Home</a>
     <a href="#about">About</a>
     <a href="#portfolio">Portfolio</a>
     <a href="#contact">Contact</a>
          <script>
     $(document).ready(function() {
var stickyNavTop = $('#nav').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
    $('#nav').addClass('sticky');
} else {
    $('#nav').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
    stickyNav();
});
});
     </script>
     <script>
     $(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 100) {
    $('#nav').fadeIn();
  } else {
    $('#nav').fadeOut();
  }
});
     </script>
</div>

<div id="page2">
  <a id="portfolio" class="smooth"></a>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <script>
$(window).on("load",function() {
  $(window).scroll(function() {
    $("#myCarousel").each(function() {
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      var windowBottom = $(window).scrollTop() + $(window).innerHeight();

      <!-- If the element is completely within bounds of the window, fade it in -->
      if (objectBottom < windowBottom) { <!-- object comes into view (scrolling down) -->
        if ($(this).css("opacity")==0) {$(this).fadeTo(1000,1);}
      } else { <!-- object goes out of view (scrolling up) -->
        if ($(this).css("opacity")==1) {$(this).fadeTo(100,0);}
      }
    });
  }); $(window).scroll(); <!-- invoke scroll-handler on page-load -->
});
</script>
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../img/elvistrabig.png" alt="Chania">
    </div>

    <div class="item">
      <img src="../img/gimibig.png" alt="Chania">
    </div>

    <div class="item">
      <img src="../img/ntcbig.png" alt="Flower">
    </div>

  </div>
</div>
</div>

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

#nav {
    background-color: rgba(0,0,0,0.2);
    display:none;
    }

#nav a {
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    float: left;
    position: relative;
    padding: 10px;
    left: 40%;
    /** Pulse effect 1 **/
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;

#page2 {
    height: 800px;
    background-image: url("../img/bglaptop.png");
    background-repeat: no-repeat;
    background-size: cover;
}