2つの異なるnavメニューに同じjQueryを適用する方法

Question

devサイトでは、固定された垂直ナビゲーションがCodyhouse tutorialから取得され、2番目のnavはページの上部に固定されています。

「アクティブ」セレクタを両方のメニュー項目に適用するには、以下のコードをクリックしてください。現時点では、どちらか一方のみではなく、両方で同時に動作するようにすることができます（したがって、1つのメニューをコメントアウトすると、もう1つのメニューに.activeセレクタが適用されます）。

JS

$(document).ready(function($) { 
     var contentSections = $('.slide'), 
      navigationItems = $('.nav a'); 

     updateNavigation(); 
     $(window).on('scroll', function() { 
      updateNavigation(); 
     }); 

     //smooth scroll to the section 
     navigationItems.on('click', function(event) { 
      event.preventDefault(); 
      smoothScroll($(this.hash)); 
     }); 
     //scroll top 
     $('.scrollToTop').on('click', function(event) { 
      event.preventDefault(); 
      smoothScroll($(this.hash)); 
     }); 


     function updateNavigation() { 
      contentSections.each(function() { 
       $this = $(this); 
       var activeSection = $('.nav a[href="#' + $this.attr('id') + '"]').data('number') - 1; 
       if (($this.offset().top - $(window).height()/2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop())) { 
        navigationItems.eq(activeSection).addClass('active'); // for the main menu 
       } else { 
        navigationItems.eq(activeSection).removeClass('active'); 
       } 
      }); 
     } 
     // sets scroll for mobi height 
     function smoothScroll(target, time) { 
      var margin = ($('.primary-nav').outerHeight(true)); 
      if (!time) { 
       time = '1500'; 
      } 

      //sets scroll for desktop height 
      if ($(window).width() > 785) { 
       $('html,body').animate({ 
        'scrollTop': target.offset().top 
       }, time); 
      } else { 
       $('html,body').animate({ 
        scrollTop: target.offset().top - margin 
       }, time); 
      } 
     } 

    }); 

HTML

  <nav class="nav"> 
       <ul class="primary-nav"> 
        <li><a href="#slide01" data-number="1">Intro</a></li> 
        <li><a href="#slide02" data-number="2">Portfolio</a></li> 
        <li><a href="#slide03" data-number="3">About</a></li> 
        <li><a href="#slide04" data-number="4">Services</a></li> 
        <li><a href="#slide05" data-number="5">News</a></li> 
        <li><a href="#slide06" data-number="6">Contact</a></li> 
       </ul> 
      </nav> 


      <nav class="nav"> 
       <ul class="dot-nav"> 
        <li class="dot-charm" title="Intro"><a href="#slide01" data-number="1"><span class="nav-dot"></span><span class="nav-label">Intro</span></a></li> 
        <li class="dot-charm" title="Portfolio"><a href="#slide02" data-number="2"><span class="nav-dot"></span><span class="nav-label">Portfolio</span></a></li> 
        <li class="dot-charm" title="About"><a href="#slide03" data-number="3"><span class="nav-dot"></span><span class="nav-label">About</span></a></li> 
        <li class="dot-charm" title="Services"><a href="#slide04" data-number="4"><span class="nav-dot"></span><span class="nav-label">Services</span></a></li> 
        <li class="dot-charm" title="News"><a href="#slide05" data-number="5"><span class="nav-dot"></span><span class="nav-label">News</span></a></li> 
        <li class="dot-charm" title="Contact"><a href="#slide06" data-number="6"><span class="nav-dot"></span><span class="nav-label">Contact</span></a></li> 
       </ul> 
      </nav> 

    <section id="slide01" class="slide"></section> 
    <section id="slide02" class="slide"></section> 
    <section id="slide03" class="slide"></section> 
    <section id="slide04" class="slide"></section> 
    <section id="slide05" class="slide"></section> 
    <section id="slide06" class="slide"></section> 

CSS

/*Horizontal Nav*/ 

    .primary-nav { 
     position: absolute; 
     top: 100%; 
     bottom: auto; 
     transform: translateY(-200%); 
     transition: transform .3s; 
     right: 0; 
     text-align: left; 
     display: block; 
     width: 100%; 
     padding: 0 30px 20px; 
     background: #FECD04 
    } 

    .primary-nav.is-visible { 
     transform: translateY(0); 
     transition: transform .3s 
    } 

    .primary-nav li { 
     display: block; 
     margin-left: 0 
    } 

    .primary-nav a { 
     display: inline-block; 
     color: #383838; 
     font-weight: 700; 
     padding: 17px 0; 
     width: 100% 
    } 

    .primary-nav a:hover { 
     color: grey 
    } 


    /*Vert Nav*/ 

    #nav-dots { 
     position: fixed; 
     right: 50px; 
     top: 50%; 
     transform: translateY(-50%); 
     text-align: right; 
     z-index: 100 
    } 

    #nav-dots a { 
     display: block; 
     line-height: 25px; 
     position: relative; 
     padding-right: 20px; 
     color: #FECD04; 
     text-decoration: none 
    } 

    #nav-dots a:hover .nav-label { 
     transform: translateX(0); 
     opacity: 1; 
     visibility: visible 
    } 

    #nav-dots nav { 
     position: absolute; 
     width: 100%; 
     padding: 0; 
     margin: 0; 
     list-style: none; 
     text-align: center; 
     line-height: 1 
    } 

    #nav-dots .dot-charm { 
     background: transparent; 
     border-bottom: 0; 
     border-left: 0; 
     border-radius: 0; 
     border-right: 12px solid #FECD04; 
     height: 8%; 
     margin: 0; 
     min-height: 20px; 
     opacity: .1; 
     width: 14px 
    } 

    #nav-dots .nav-label { 
     display: block; 
     opacity: .5; 
     visibility: hidden; 
     transform: translateX(-10px); 
     transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 
    } 


    /*Sections*/ 

    .slide { 
     padding: 80px 15px; 
     position: relative 
    } 

私はこの質問はbeforeを頼まれましたが、私はそこに示唆されたすべてのものを試してみましたが、どこにもなっていないことを指摘しています。

これについてのお手伝いは大変ありがとうございます。

Answer 1

私は次のことを理解し、それは私のために働いた。

$(document).ready(function($) { 
      var contentSections = $('.slide'), 
       navigationItems = $('.nav a'); 
       dotNavigationItems = $('.dot-nav a'); 

      updateNavigation(); 
      updateSecondNavigatioin(); 
      $(window).on('scroll', function() { 
       updateNavigation(); 
       updateSecondNavigatioin(); 
      }); 

      //smooth scroll to the section 
      navigationItems.on('click', function(event) { 
       event.preventDefault(); 
       smoothScroll($(this.hash)); 
      }); 
      //scroll top 
      $('.scrollToTop').on('click', function(event) { 
       event.preventDefault(); 
       smoothScroll($(this.hash)); 
      }); 


      function updateNavigation() { 
       contentSections.each(function() { 
        $this = $(this); 
        var activeSection = $('.nav a[href="#' + $this.attr('id') + '"]').data('number') - 1; 
        if (($this.offset().top - $(window).height()/2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop())) { 
         navigationItems.eq(activeSection).addClass('active'); // for the main menu 
        } else { 
         navigationItems.eq(activeSection).removeClass('active'); 
        } 
       }); 
      } 


      function updateSecondNavigatioin() { 
       contentSections.each(function() { 
        $this = $(this); 
        var activeSection = $('.dot-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1; 
        if (($this.offset().top - $(window).height()/2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop())) { 
         dotNavigationItems.eq(activeSection).addClass('selected'); // for the second menu 
        } else { 
         dotNavigationItems.eq(activeSection).removeClass('selected'); 
        } 
       }); 
      } 


      // sets scroll for mobi height 
      function smoothScroll(target, time) { 
       var margin = ($('.primary-nav').outerHeight(true)); 
       if (!time) { 
        time = '1500'; 
       } 

       //sets scroll for desktop height 
       if ($(window).width() > 785) { 
        $('html,body').animate({ 
         'scrollTop': target.offset().top 
        }, time); 
       } else { 
        $('html,body').animate({ 
         scrollTop: target.offset().top - margin 
        }, time); 
       } 
      } 

     });