Creating an active dynamic Menu with JQuery
<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>