title: Creating an active dynamic Menu with JQuery
body: <p>I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.</p>
  
  <p>I have my code like that right now: <a href="https://jsfiddle.net/49rcfg0t/" rel="nofollow noreferrer">https://jsfiddle.net/49rcfg0t/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    $(document).on("scroll", onScroll);
  
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
      e.preventDefault();
      $(document).off("scroll");
  
      $('a').each(function () {
        $(this).removeClass('active');
      })
      $(this).addClass('active');
  
  
    });
  });
  
  function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.topmenu a').each(function () {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
        $('.topmenu a').removeClass("active");
        currLink.addClass("active");
      }
      else{
        currLink.removeClass("active");
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="portfolio2.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!--Menu superior--&gt;
  &lt;nav class="header"&gt;
  
    &lt;div&gt;
  
      &lt;a href="#anchor1" class="topmenu"&gt;
        &lt;img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png"&gt;
        &lt;span id="profile"&gt;Menu 1&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;a href="#anchor2" class="topmenu"&gt;
        &lt;img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png"&gt;
        &lt;span id="exp"&gt;Menu 2&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;a href="#anchor3" class="topmenu"&gt;
        &lt;img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png"&gt;
        &lt;span id="hab"&gt;Menu 3&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;a href="#anchor4" class="topmenu"&gt;
        &lt;img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png"&gt;
        &lt;span id="pro"&gt;Menu 4&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;a href="#anchor5" class="topmenu"&gt;
        &lt;img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png"&gt;
        &lt;span id="contact"&gt;Menu 5&lt;/span&gt;
      &lt;/a&gt;
  
    &lt;/div&gt;      
  
  &lt;/nav&gt;  
  
  &lt;div class="cuerpo"&gt;
    &lt;span class="anchor" id="anchor1"&gt;&lt;/span&gt;
    &lt;div style="background-color:blue"&gt;Area 1&lt;/div&gt;
  
    &lt;span class="anchor" id="anchor2"&gt;&lt;/span&gt;
    &lt;div style="background-color:red"&gt;Area 2&lt;/div&gt;
  
    &lt;span class="anchor" id="anchor3"&gt;&lt;/span&gt;
    &lt;div style="background-color:yellow"&gt;Area 3&lt;/div&gt;
  
    &lt;span class="anchor" id="anchor4"&gt;&lt;/span&gt;
    &lt;div style="background-color:brown"&gt;Area 4&lt;/div&gt;
  
    &lt;span class="anchor" id="anchor5"&gt;&lt;/span&gt;
    &lt;div style="background-color:green"&gt;Area 5&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have the following problems:</p>
  
  <ol>
  <li>When I scroll manually the elements are not activated. </li>
  <li>When I use the links the elements are activated but they do not
  answer to the anchor petition.</li>
  <li>I also I would like, when I activate one of the elements of the
  menu, to change the image with another one. For example, change the
  first icon with this one:
  <img src="https://i.stack.imgur.com/6qxBF.png" alt="this one"></li>
  </ol>
  
  <p>Thank you in advance, this problem is driving me crazy!</p>