title: The script activates only the main menu items. How to make the code apply to sub-items
body: <p>The script activates only the main menu <strong>items</strong>. How to make the code apply to <strong>sub-items</strong>. <em>2.1</em> - <em>2.2</em> And other subparagraphs if they exist. I can’t understand how to select all <strong>li</strong> elements including those embedded in each other.</p>
  <p>Please help me finish the code, or maybe someone has a similar script with the same functionality.</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>var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight() + 15,
    // All list items
    menuItems = topMenu.find(".scroll-to"),
    // 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");
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      height: 6000px;
      font-family: Helvetica, Arial;
  }
  
  #top-menu {
      position: fixed;
      z-index: 1;
      background: white;
      left: 0;
      right: 0;
      top: 50px;
  }
  
  #top-menu li {
      float: left;
  }
  
  #top-menu a {
      display: block;
      padding: 5px 25px 7px 25px;
      width: 4em;
      text-align: center;
      -webkit-transition: .5s all ease-out;
      -moz-transition: .5s all ease-out;
      transition: .5s all ease-out;
      border-top: 3px solid white;
      color: #aaa;
      text-decoration: none;
  }
  
  #top-menu a:hover {
      color: #000;
  }
  
  #top-menu li.active &gt; a {
      border-top: 3px solid #333;
      color: #333;
  }
  
  #zod{
      height:400px;
  }
  
  #foo{
      height:400px;
  }
  #foo2.1{
      height:400px;
      display:block
  }
  #foo2.2{
      height:400px;
       display:block
  }
  #bar {
      height:400px;
  }
  
  #baz {
      height:400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul id="top-menu"&gt;
    &lt;li&gt;
      &lt;a class="scroll-to" href="#zod"&gt;zod&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="scroll-to" href="#foo"&gt;Foo&lt;/a&gt;
        &lt;ul class="articleSubList"&gt;
          &lt;li&gt;&lt;a class="scroll-to" href="#foo2.1"&gt;foo 1.1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="scroll-to" href="#foo2.2"&gt;foo 2.2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="scroll-to" href="#bar"&gt;Bar&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="scroll-to" href="#baz"&gt;Baz&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="zod"&gt;Zod&lt;/div&gt;
  &lt;div id="foo"&gt;Foo111&lt;/div&gt;
  &lt;div id="foo2.1"&gt;Foo 1.1&lt;/div&gt;
  &lt;div id="foo2.2"&gt;Foo 1.2&lt;/div&gt;
  &lt;div id="bar"&gt;Bar&lt;/div&gt;
  &lt;div id="baz"&gt;Baz&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/cShCs.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cShCs.gif" alt="enter image description here" /></a></p>