jQuery - A different background color for each item when active in a sticky menu

Question

I'm having some difficulty wrapping my head around how to make my sticky-menu items each have their own background color when their respective anchor is scrolled to in the viewport.

JSfiddle here: https://jsfiddle.net/ym88etuk/6/ -- this works how I want it to now, but I could still use help making this DRY friendly.

HTML:

<ul class="sticky">
  <a href=#part1 class="scroll">
    <li>part1</li>
  </a>
  <a href=#part2 class="scroll">
    <li>part2</li>
  </a>
  <a href=#part3 class="scroll">
    <li>part3</li>
  </a>
  <a href=#part4 class="scroll">
    <li>part4</li>
  </a>
</ul>
<div class=content>
  <div id=part1 class="section gray">
  </div>
  <div id=part2 class="section green">
  </div>
  <div id=part3 class="section gray">
  </div>
  <div id=part4 class="section green">
  </div>
  <div class=extraspace>
  </div>
  </div>
</div>

CSS:

.sticky{
  position: fixed;
  top:0px;
  width:100%;
  z-index:999;
  background: white;
  margin:0;
}
.content{
  position:relative;
  top: 28px;
  width:100%;
}
ul{
  list-style-type:none;
}
li{
  float: left;
  width 20%;
  padding:2.5%;
}
.section{
  height:300px;
}
.gray{
  background-color:gray;
}
.green{
  background-color:green;
}
.clearfix:after {
    content: " "; 
    display: table; 
    clear: both; 
}
.extraspace{
  height: 400px;
}

jQuery/Javascript:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html, body').animate({
      scrollTop:($(this.hash).offset().top) - 32}, 500);
    });
});


$(window).scroll(function(){
// I've removed my work here, because it was very broken... and not pertinent to solving the issue.
}

Answer 1

I have an answer, though I am still struggling to make this fit DRY programming techniques:

I've updated the JSfiddle to reflect these changes https://jsfiddle.net/ym88etuk/36/

HTML:

<ul class="sticky">
  <a href=#part1 class="scroll">
    <li>part1</li>
  </a>
  <a href=#part2 class="scroll">
    <li>part2</li>
  </a>
  <a href=#part3 class="scroll">
    <li>part3</li>
  </a>
  <a href=#part4 class="scroll">
    <li>part4</li>
  </a>
</ul>
<div class=content>
<div id=part1 class="section gray">
</div>
<div id=part2 class="section green">
</div>
<div id=part3 class="section gray">
</div>
<div id=part4 class="section green">
</div>
<div class=extraspace>
</div>
</div>
</div>

CSS:

.sticky{
  position: fixed;
  top:0px;
  width:100%;
  z-index:999;
  background: white;
  margin:0;
}
.content{
  position:relative;
  top: 28px;
  width:100%;
}
ul{
  list-style-type:none;
}
li{
  float: left;
  width 20%;
  padding:2.5%;
}
.section{
  height:300px;
}
.gray{
  background-color:gray;
}
.green{
  background-color:green;
}
.blue{
  background-color:blue;
  color: #fff;
}
.orange{
  background-color:orange;
  color: #fff;
}
.pink{
  background-color:pink;
  color: #fff;
}
.purple{
  background-color:purple;
  color: #fff;
}
.clearfix:after {
    content: " "; 
    display: table; 
    clear: both; 
}
.extraspace{
  height: 400px;
}

jQuery:

//smooth scroll
jQuery(document).ready(function($) {
var greenback = 
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html, body').animate({
      scrollTop:($(this.hash).offset().top) - 32}, 500);
    });
});

//Navbar Functions
$(document).ready(function() {
  var pos1 = $("#part1").position(); 
  var pos2 = $("#part2").position(); 
  var pos3 = $("#part3").position(); 
  var pos4 = $("#part4").position(); 
  $(window).scroll(function(){
    var windowpos = $(window).scrollTop();
    part1li = $("li", 'a[href="#part1"]');
    part2li = $("li", 'a[href="#part2"]');
    part3li = $("li", 'a[href="#part3"]');
    part4li = $("li", 'a[href="#part4"]');
    if (windowpos >= pos1.top && windowpos < pos2.top) {
            part1li.addClass('blue');
        } else {
            part1li.removeClass('blue');
        }
            if (windowpos >= pos2.top && windowpos < pos3.top) {
            part2li.addClass('orange');
        } else {
            part2li.removeClass('orange');
        }
            if (windowpos >= pos3.top && windowpos < pos4.top) {
            part3li.addClass('pink');
        } else {
            part3li.removeClass('pink');
        }
            if (windowpos >= pos4.top) {
            part4li.addClass('purple');
        } else {
            part4li.removeClass('purple');
        }
      });
    });