title: How to make link color change based on location on page?
body: <p><br>
  I am working on a single-page website that has a navigation bar along the top, with internal links to various sections of the page. My goal is to have the links change color depending on where you are on the page; if you are in the “Top” section, then the link to “Top” would be black while all the others were green; if you were in the “Services” section, then the link to “Services” would be black while all the others were green, etc. Is this possible, and if so, how would I implement it using HTML, CSS, or jQuery? If it helps, I am using Foundation to structure my website. Excerpts of my code are below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(window).scroll(function() {
      var scrollDistance = $(window).scrollTop();
  
      var splashOneHeight = $("div#splash-one").height();
      var servicesHeight = $("div#services").height();
      var splashTwoHeight = $("div#splash-two").height();
      var pricesHeight = $("div#prices").height();
  
      var firstFade = splashOneHeight - 50
      var secondFade = splashOneHeight + servicesHeight + 50
      var thirdFade = splashOneHeight + servicesHeight + splashTwoHeight
      var fourthFade = splashOneHeight + servicesHeight + splashTwoHeight + pricesHeight
  
      if (scrollDistance &gt; 0) {
        $("nav").addClass("highlight");
      };
      if (scrollDistance == 0) {
        $("nav").removeClass("highlight");
      };
  
      if (scrollDistance &gt;= 0 &amp;&amp; scrollDistance &lt; firstFade) {
        $("nav").css("opacity", '0.75');
      };
      if (scrollDistance &gt;= firstFade &amp;&amp; scrollDistance &lt; secondFade) {
        $("nav").css("opacity", '0.96');
      };
      if (scrollDistance &gt;= secondFade &amp;&amp; scrollDistance &lt; thirdFade) {
        $("nav").css("opacity", '0.75');
      };
      if (scrollDistance &gt;= thirdFade &amp;&amp; scrollDistance &lt; fourthFade) {
        $("nav").css("opacity", '0.96');
      };
      if (scrollDistance &gt;= fourthFade) {
        $("nav").css("opacity", '0.75');
      };
    });
  })
  
  jQuery(function($) {
    // from http://imakewebthings.com/jquery-waypoints/
  
    // Wicked credit to
    // http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
    var scrollElement = 'html, body';
    $('html, body').each(function() {
      var initScrollTop = $(this).attr('scrollTop');
      $(this).attr('scrollTop', initScrollTop + 1);
      if ($(this).attr('scrollTop') == initScrollTop + 1) {
        scrollElement = this.nodeName.toLowerCase();
        $(this).attr('scrollTop', initScrollTop);
        return false;
      }
    });
  
    // Smooth scrolling for internal links
    $("a[href^='#']").click(function(event) {
      event.preventDefault();
  
      var $this = $(this),
        target = this.hash,
        $target = $(target);
  
      $(scrollElement).stop().animate({
        'scrollTop': $target.offset().top
      }, 1000, 'swing', function() {
        window.location.hash = target;
      });
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
  @import url(http://fonts.googleapis.com/css?family=Arvo:400,700);
   nav {
    width: 100%;
    position: fixed;
    background-color: white;
    opacity: 0.75;
    height: 50px;
    top: 0px;
    left: 0px;
    z-index: 1000;
    transition: opacity 0.5s ease;
  }
  nav ul {
    display: block;
    list-style: none;
    text-align: center;
    position: relative;
    margin: 10px auto 0 auto;
    width: 500px;
  }
  nav ul li {
    display: inline;
    width: 150px;
    font-family: "Montserrat", sans-serif;
    padding: 0 20px;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
  }
  nav ul li a {
    transition: all 0.6s ease;
    color: #008040;
  }
  nav ul li a:hover {
    color: black;
  }
  nav.highlight {
    border-bottom: 3px solid rgba(190, 190, 190, 0.5);
    box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;DragonTech &amp;mdash; Home&lt;/title&gt;
  
    &lt;link href="css/foundation.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/animate.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/rippler.min.css" rel="stylesheet" type="text/css"&gt;
    &lt;link href="css/normalize.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/filters.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/app.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/media.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a class="top" href="#splash-one"&gt;Top&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a class="services" href="#services"&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a class="prices" href="#prices"&gt;Prices&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a class="appointment" href="#splash-three"&gt;Contact us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;script src="js/vendor/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/vendor/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/foundation/foundation.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/foundation/foundation.tooltip.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/foundation/foundation.magellan.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/vendor/modernizr.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/app.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).foundation();
    &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>