title: Adding a css class on scroll via javascript
body: <p>I have a navigation with an empty div in each anchor tag that I am styling on hover.</p>
  
  <p>html </p>
  
  <pre><code>&lt;li&gt;&lt;a href="#events"&gt;SPECIAL EVENTS &lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>a:hover div, a:active div{
      color: $black;
      height: 1px;
      background-color: $black;
      width: 100%;
      margin-top: 5px;
  }
  </code></pre>
  
  <p>I also have a active class that I am attaching on click with some js. This is currently working correctly.</p>
  
  <pre><code>var currentDiv;
  
  function addSelected(){
  
  if(currentDiv !== undefined){
      $(currentDiv).removeClass("active");    
  }
  
  currentDiv = $(this).find('div');
  $(currentDiv).addClass("active");
  }
  
  $(".menu a").click(addSelected);
  </code></pre>
  
  <p>What I am trying to do is attached that same active class based on the user scroll. I get most of it working, but I can't seem to figure how how to attached the class to the div, and not the anchor itself. Here is the js I'm working with.</p>
  
  <p>js</p>
  
  <pre><code>    // Cache selectors
  var lastId,
  topMenu = $("#desktop-nav"),
  topMenuHeight = topMenu.outerHeight()+15,
  // All list items
  menuItems = topMenu.find("a"),
  // Anchors corresponding to menu items
  scrollItems = menuItems.map(function(){
    var item = $($(this).attr("href"));
    if (item.length) { return item; }
  });
  
  // Bind to scroll
  $(window).scroll(function(){
  // Get container scroll position
  var fromTop = $(this).scrollTop()+topMenuHeight;
  
  // Get id of current scroll item
  var cur = scrollItems.map(function(){
   if ($(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("active")
      //.end().filter("[href='#"+id+"']").parent().addClass("active");
  
      .removeClass("active");
      end().filter($("[href='#"+id+"']")).find('div').addClass("active");
  
      console.log(id);
  }                   
  });
  </code></pre>
  
  <p>I think the part that I am trying to change is this</p>
  
  <pre><code>"[href='#"+id+"']").parent()
  </code></pre>
  
  <p>but everything I try is either not working or giving me errors.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the fiddle that I am trying to modify.</p>
  
  <p><a href="http://jsfiddle.net/mekwall/up4nu/" rel="nofollow noreferrer">fiddle link</a></p>