スクロールすると画面上部にメニューを固定し、さらに背景色に合わせて色を変えたい

前提

HTML5、CSS3でWebサイトを作成しています。

実現したいこと

画面の途中にあるナビゲーションメニューを、スクロールしたら画面上部に固定したい
さらに、背景色に合わせて文字色を変更したい

試したこと

以下JavaScriptでセクションごとに文字色を変えるようにしてみましたが、
sectionの境目10pxくらい下に行かないと文字色が変わりません。
ページ内リンクをしているのですが、該当のページに遷移すると背景色とナビゲーションメニューの文字色が
同じ色のため、一瞬メニューが消えたみたいになってしまいます。

  <script>
  $(function(){	
         $(window).scroll(function(){
      if ($(window).scrollTop() > $('#works').offset().top &&　$(window).scrollTop() < $('#demos').offset().top){
           $("nav ul li a").css("color", "#fff");
          $("nav ul li a").css("border-color", "#fff");
      }else
           $("nav ul li a").css({

           "color":"#fff500","border-color": "#fff500"});
            });
      }); 
  </script>

また、Midnight.jsというjsを見つけて、試してみましたが、
「スクロールすると画面上部に固定」と、「背景色に合わせて文字色を変える」ことが両立できませんでした。

■html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
	  <link href="test.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
	    <script type="text/javascript" src="https://kohimoto.com/labo/demo/js/midnight.jquery.min.js?ver=5.4.1"></script>
	  <script src="test.js"></script>
	  	  <link	href="js/midnight.jquery.min.js">
    <link href="test.css" rel="stylesheet" type="text/css">
<script>
	  $(function () {
	$('.is-fixed').midnight();
});
	  </script>
  </head>
  <body>
	  <div class="wrap0"></div>
<header>
  <nav class="ttl">
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
    </ul>
  </nav>
</header>

<main>
<div class="wrap1" data-midnight="default"></div>
<div class="wrap2" data-midnight="black"></div>
<div class="wrap3" data-midnight="default"></div>
</main>
  </body>
</html>

■CSS

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.wrap0{
	height: 50vh;
	background-color: blue;
}
	   .wrap1 {
    height: 100vh;
    background:#000;
    }
    .wrap2 {
    height: 100vh;
    background:#fff;
    }
    .wrap3 {
    height: 100vh;
    background:#555;
    }
.midnightHeader.default {
  color: white;
}

■js
$(function() {
  var $win = $(window),
      $main = $('main'),
      $nav = $('nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

html内の

を消すと、スクロール後に上部に固定できるのですが、
追加すると、最初から上部に固定されてしまいます。

全く別のやり方でも構いませんので、教えていただけると嬉しいです（T_T）