title: How do i hide child <ul>'s when scrolled to a certain id?
body: <p>How can I hide my child ul's when they're not supposed to be visible i.e when someone have scrolled to another section? Could you listen for a specific 'frame'/position to show the different sub menus, or perhaps see which section that has the active class and then take that ones <code>.attr('id')</code> and show the corresponding one in the <code>nav</code>? </p>
  
  <p>I hope someone here could contribute with a solution that has good browser support (if that could be an issue).</p>
  
  <p><a href="http://jsfiddle.net/j4Y2h/17/" rel="nofollow">JSFiddle here</a>  </p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#1"&gt;First&lt;/a&gt;
           &lt;ul id="sub-menu1"&gt;
               &lt;li&gt;Item 1&lt;/li&gt;
               &lt;li&gt;Item 2&lt;/li&gt;
           &lt;/ul&gt; 
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#2"&gt;Second&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#3"&gt;Third&lt;/a&gt;
          &lt;ul id="sub-menu3"&gt;
               &lt;li&gt;Item 1&lt;/li&gt;
               &lt;li&gt;Item 2&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#4"&gt;Fourth&lt;/a&gt;
          &lt;ul id="sub-menu4"&gt;
               &lt;li&gt;Item 1&lt;/li&gt;
               &lt;li&gt;Item 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#5"&gt;Fifth&lt;/a&gt;
            &lt;ul id="sub-menu5"&gt;
               &lt;li&gt;Item 1&lt;/li&gt;
               &lt;li&gt;Item 2&lt;/li&gt;
           &lt;/ul&gt; 
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div class="sections"&gt;
    &lt;section id="1"&gt;&lt;h1&gt;First&lt;/h1&gt;&lt;/section&gt;
    &lt;section id="2"&gt;&lt;h1&gt;Second&lt;/h1&gt;&lt;/section&gt;
    &lt;section id="3"&gt;&lt;h1&gt;Third&lt;/h1&gt;&lt;/section&gt;
    &lt;section id="4"&gt;&lt;h1&gt;Fourth&lt;/h1&gt;&lt;/section&gt;
    &lt;section id="5"&gt;&lt;h1&gt;Fifth&lt;/h1&gt;&lt;/section&gt;
  &lt;/div&gt;
  &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>Javascript/jQuery:</p>
  
  <pre><code>var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();
  
  $(window).on('scroll', function () {
      var cur_pos = $(this).scrollTop();
  
      sections.each(function() {
          var top = $(this).offset().top - nav_height,
              bottom = top + $(this).outerHeight();
  
          if (cur_pos &gt;= top &amp;&amp; cur_pos &lt;= bottom) {
              nav.find('a').removeClass('active');
              sections.removeClass('active');
  
              $(this).addClass('active');
              var link = nav.find('a[href="#'+$(this).attr('id')+'"]');
              link.addClass('active');
  
              // Calling this function just to see if there is a sub menu to show
              checkSubmenu(link);
          }
      });
  });
  
  // Want to check if there is a Submenu - if, then show it.
  // But it should also hide a sub-menu not corresponding to the correct section
  // which this solutions does not support
  function checkSubmenu(el) {
      if(el.next('ul').length) {
          el.next('ul').slideDown();
      } else {
          $('nav &gt; ul &gt; li &gt; ul').slideUp();
      }
  }
  
  nav.find('a').on('click', function () {
      var $el = $(this)
      , id = $el.attr('href');
  
      $('html, body').animate({
          scrollTop: $(id).offset().top - nav_height
      }, 500);
  
      return false;
  });
  </code></pre>