title: Scrollnav.js SideBar Won't Activate
body: <p>Thank you for any help, and forgive me for being a noob.  The answer may very well be very simple;</p>
  
  <p>I am trying to use a JQuery plugin called "<a href="http://scrollnav.com/" rel="nofollow">ScrollNav.js</a>" for my personal site "EthanGreenspan.com".</p>
  
  <p>I want to use this plugin to make a simple left pane with an interactive table of contents that lets users click sections to scroll to them.  As you can see in the JSFiddle (link at bottom), the  in the left pane does not function like the ScrollNav site.</p>
  
  <p>This is the HTML for the  that I wish to use as the table of contents.</p>
  
  <pre><code>&lt;div class="leftpane" class="main" role="main"&gt;
  &lt;nav class="scroll-nav" role="navigation"&gt;
  &lt;span class="scroll-nav-heading"&gt;Sections&lt;/span&gt;
  &lt;ol class="scroll-nav-list"&gt;
  &lt;li class="scroll-nav-item active top"&gt;
  &lt;a href="#jumpNav-0" class="scroll-nav-link"&gt;Top&lt;/a&gt;&lt;/li&gt;
  &lt;li class="scroll-nav-item active Current Work"&gt;
  &lt;a href="#jumpNav-1" class="scroll-nav-link"&gt;&lt;/a&gt;Current Work&lt;/li&gt;
  &lt;li&gt;Photography&lt;/li&gt;
  &lt;li&gt;Consulting&lt;/li&gt;
  &lt;li&gt;Blog&lt;/li&gt;
  &lt;li&gt;Contact Me&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the Jquery (I put it inline for JSFiddle)</p>
  
  <pre><code>&lt;script&gt;
  $('.body').scrollNav({
      sections: 'h3',
      titletext: 'Scroll To',
      fixedmargin: 40,
      animation: true,
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>Finally, here is the ScrollNav JQuery plug-in;</p>
  
  <pre><code>(function(e){e.fn.scrollNav=function(t){e("body").addClass("sn-loading");var n={sections:"h3",titleText:"Scroll To",fixedMargin:40,animated:!0,speed:500,showHeadline:!0,showTopLink:!0,location:"insertBefore"};e.extend(n,t);var r=[],i=this,s=i.find(n.sections),o=e("&lt;nav /&gt;",{"class":"scroll-nav",role:"navigation"}),u=function(){if(n.showTopLink===!1)return;var e=i.attr("id"),t=i.offset().top;if(e)r.push({id:e,offset:t,text:"Top"});else{i.attr("id","jumpNav-0");r.push({id:"jumpNav-0",offset:t,text:"Top"})}},a=function(){s.each(function(t){var n="jumpNav-"+(t+1),i=e(this).offset().top,s=e(this).text();e(this).attr("id",n);r.push({id:n,offset:i,text:s})})},f=function(){var t=e("&lt;span /&gt;",{"class":"scroll-nav-heading",text:n.titleText}),i=e("&lt;ol /&gt;",{"class":"scroll-nav-list"});e.each(r,function(t){var n=t===0?e("&lt;li /&gt;",{"class":"scroll-nav-item active"}):e("&lt;li /&gt;",{"class":"scroll-nav-item"}),r=e("&lt;a /&gt;",{href:"#"+this.id,"class":"scroll-nav-link",text:this.text});i.append(n.append(r))});n.showHeadline===!0?o.append(t).append(i):o.append(i)},l=function(){var t=o.offset().top;e(window).resize(function(){e.each(r,function(){this.offset=e("#"+this.id).offset().top})});e(window).scroll(function(){var i=e(window).scrollTop(),s=e(window).height()*.5;i&gt;t-n.fixedMargin?o.addClass("fixed"):o.removeClass("fixed");e.each(r,function(){if(this.offset&gt;i-n.fixedMargin&amp;&amp;this.offset&lt;i+s){o.find("li").removeClass("active");o.find('a[href="#'+this.id+'"]').parents("li").addClass("active")}})})};if(i.length!==0){u();a();f()}i.length!==0&amp;&amp;s.length!==0?o[n.location](i):i.length===0?console.log("Build failed, scrollNav could not find '"+i.selector+"'"):s.length===0&amp;&amp;console.log("Build failed, scrollNav could not find any '"+n.sections+"'s inside of '"+i.selector+"'");l();n.animated===!0&amp;&amp;e(".scroll-nav-link").click(function(){var t=e(this).attr("href"),r=e(t).offset().top;e("html:not(:animated),body:not(:animated)").animate({scrollTop:r-40},n.speed);return!1});e("body").removeClass("sn-loading").addClass("sn-active")}})(jQuery);
  </code></pre>
  
  <p>I understand the basics of JQuery, but could really use some help from you!</p>
  
  <p>Here is a link to a <a href="http://jsfiddle.net/EthanMax/DP7sf/" rel="nofollow">JSFiddle</a> with my HTML/CSS/JS.</p>
  
  <p>PLEASE AND THANK YOU!</p>