title: Can't get the highlight menu items on scroll jQuery script to work with WordPress Divi theme
body: <p>I am buiding a one page WordPress website with Divi theme and I want the menu items to highlight while the page is scrolled up/down like here: <a href="http://codepen.io/ivanchi/pen/QEEeKd?editors=0010" rel="nofollow">http://codepen.io/ivanchi/pen/QEEeKd?editors=0010</a>. The problem is that I can't get it to work on Wordpress. I equeued it using this code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  add_action( 'wp_enqueue_scripts', 'my_enqueue_assets', 16 );
              
              wp_register_script( 'jqueryMinJs', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' , '', '', true );
              wp_enqueue_script( 'jqueryMinJs' );
              
              wp_register_script( 'highlight-on-scroll', get_template_directory_uri().'/js/highlight_on_scroll.js', array('jquery'), false, true );
       wp_enqueue_script( 'highlight-on-scroll' );      
  }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and I included the jQUERY script in the /js/highlight_on_scroll.js directory: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $jq = jQuery.noConflict(true);
  (function($) {
  
                $jq("div").css("border", "1px solid red");
    $jq("#et-top-navigation a").addClass("green-navigation");
  
  // Cache selectors
  var lastId,
   topMenu = $jq("#et-top-navigation"),
   topMenuHeight = topMenu.outerHeight()+1,
   // All list items
   menuItems = topMenu.find("a"),
   // Anchors corresponding to menu items
   scrollItems = menuItems.map(function(){
     var item = $jq($jq(this).attr("href"));
      if (item.length) { return item; }
   });
  
  // Bind click handler to menu items
  // so we can get a fancy scroll animation
  menuItems.click(function(e){
    var href = $jq(this).attr("href"),
        offsetTop = href === "#" ? 0 : $jq(href).offset().top-topMenuHeight+1;
    $jq('html, body').stop().animate({ 
        scrollTop: offsetTop
    }, 850);
    e.preventDefault();
  });
  
  // Bind to scroll
  $jq(window).scroll(function(){
     // Get container scroll position
     var fromTop = $jq(this).scrollTop()+topMenuHeight;
     
     // Get id of current scroll item
     var cur = scrollItems.map(function(){
       if ($jq(this).offset().top &lt; fromTop)
         return this;
     });
     // Get the id of the current element
     cur = cur[cur.length-1];
     var id = cur &amp;&amp; cur.length ? cur[0].id : "";
     
     if (lastId !== id) {
         lastId = id;
         // Set/remove active class
         menuItems
           .parent().removeClass("mactive")
           .end().filter("[href=#"+id+"]").parent().addClass("mactive");
     }                   
  });
  }($jq));</code></pre>
  </div>
  </div>
  </p>
  
  <p>I used  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $jq = jQuery.noConflict(true); </code></pre>
  </div>
  </div>
  </p>
  
  <p>for preventing conflict and these two lines are working fine(I added them for testing purposes)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>            $jq("div").css("border", "1px solid red");
        $jq("#et-top-navigation a").addClass("green-navigation");</code></pre>
  </div>
  </div>
  </p>
  
  <p>but the rest of jQuery script does not. </p>
  
  <p>What am I doing wrong?</p>