スクロールのメニューの現在の項目を変更する

Question

複数行のページがあり、各行にはスライドショーのような背景画像（表紙）が含まれています。

ページのスライド数を表示するナビゲーションメニューもあります。メニュー項目をクリックすると、その行がスライドして表示されます。

問題は、スクロールして特定の行に手動で移動すると、メニューは同じままで、最初の行/スライドに表示されていることを示します。

スクロール時にナビゲーションメニューの現在の項目を動的に変更できるようにする必要があります。メニュー項目をクリックしてスクロールしないときには機能します。

行/スライドにスクロールするたびに、クラスnav__item--currentを単にトグルします。

DEMOhttps://jsfiddle.net/gz2r7zLa/

HTML

<section id="slideshow"> 
    <nav class="nav nav--beca"> 
     <a href="#slide1" class="nav__item nav__item--current"><span class="nav__item-title"><span>01/06</span></span></a> 
     <a href="#slide2" class="nav__item"><span class="nav__item-title"><span>02/06</span></span></a> 
     <a href="#slide3" class="nav__item"><span class="nav__item-title"><span>03/06</span></span></a> 
     <a href="#slide4" class="nav__item"><span class="nav__item-title"><span>04/06</span></span></a> 
     <a href="#slide5" class="nav__item"><span class="nav__item-title"><span>05/06</span></span></a> 
     <a href="#slide6" class="nav__item"><span class="nav__item-title"><span>06/06</span></span></a> 
    </nav> 
    <div class="container-fluid"> 
     <div class="row" id="slide1"> 
      <div class="col-md-12 slide"> 
       <div class="slide-background" style="background: url('assets/img/slides/1.png') center center/cover;"></div> 
      </div> 
     </div> 

     <div class="row" id="slide2"> 
      <div class="col-md-12 slide"> 
       <div class="slide-background" style="background: url('assets/img/slides/2.jpg') center center/cover;"> 
        <div class="slide-content"> 
         <h2>UNDP SAVE THE PARSLEY</h2> 
         <p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p> 
         <a href="#" class="btn btn-default btn-lg slide-button">Explore</a> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row" id="slide3"> 
      <div class="col-md-12 slide"> 
       <div class="slide-background" style="background: url('assets/img/slides/3.jpg') center center/cover;"> 
        <div class="slide-content"> 
         <h2>UNDP SAVE THE PARSLEY</h2> 
         <p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p> 
         <a href="#" class="btn btn-default btn-lg slide-button">Explore</a> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row" id="slide4"> 
      <div class="col-md-12 slide"> 
       <div class="slide-background" style="background: url('assets/img/slides/4.jpg') center center/cover;"> 
        <div class="slide-content"> 
         <h2>UNDP SAVE THE PARSLEY</h2> 
         <p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p> 
         <a href="#" class="btn btn-default btn-lg slide-button">Explore</a> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row" id="slide5"> 
      <div class="col-md-12 slide"> 
       <div class="slide-background" style="background: url('assets/img/slides/5.jpg') center center/cover;"> 
        <div class="slide-content"> 
         <h2>UNDP SAVE THE PARSLEY</h2> 
         <p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p> 
         <a href="#" class="btn btn-default btn-lg slide-button">Explore</a> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row" id="slide6"> 
      <div class="col-md-12 slide"> 
       <div class="slide-background" style="background: linear-gradient(rgba(10,24,12,0.8), rgba(3,2,1,0.8)), url('assets/img/slides/6.jpg') center center/cover;"> 
        <div class="slide-content"> 
         <h2>UNDP SAVE THE PARSLEY</h2> 
         <p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p> 
         <a href="#" class="btn btn-default btn-lg slide-button">Explore</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

.nav { 
    position: relative; 
} 

.nav__item { 
    line-height: 1; 
    position: relative; 
    display: block; 
    margin: 0; 
    padding: 0; 
    letter-spacing: 0; 
    color: currentColor; 
    border: 0; 
    background: none; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
} 

.nav__item:focus { 
    outline: none; 
} 

.nav--beca { 
    position: fixed; 
    top: 50%; 
    right: 0; 
    margin: 0; 
    -webkit-transform: translate3d(0,-50%,0); 
    transform: translate3d(0,-50%,0); 
    z-index:10; 
} 

.nav--beca a { 
    color: currentColor; 
    text-decoration: none; 
} 

.nav--beca .nav__item { 
    width: 5.5em; 
    height: 2.5em; 
} 

.nav--beca .nav__item::before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    width: 50%; 
    height: 2px; 
    margin: -1px 0 0 0; 
    opacity: 0.5; 
    background: #000; 
    -webkit-transform: scale3d(0.5,1,1); 
    transform: scale3d(0.5,1,1); 
    -webkit-transform-origin: 100% 0%; 
    transform-origin: 100% 0%; 
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; 
    transition: transform 0.5s, opacity 0.5s; 
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 
    transition-timing-function: cubic-bezier(0.2,1,0.3,1); 
} 

.nav--beca .nav__item:not(.nav__item--current):focus::before, 
.nav--beca .nav__item:not(.nav__item--current):hover::before { 
    opacity: 1; 
    -webkit-transform: scale3d(0.75,1,1); 
    transform: scale3d(0.75,1,1); 
} 

.nav--beca .nav__item--current::before { 
    opacity: 1; 
    -webkit-transform: scale3d(2,1,1); 
    transform: scale3d(2,1,1); 
} 

.nav--beca .nav__item-title { 
    font-size: 1em; 
    font-weight: bold; 
    display: block; 
    overflow: hidden; 
    margin: -1.15em 0 0 1.6em; 
    text-align: left; 
    white-space: nowrap; 
    pointer-events: none; 
    margin-left: -40px; 
} 

.nav--beca .nav__item-title span { 
    display: block; 
    -webkit-transform: translate3d(0,100%,0); 
    transform: translate3d(0,100%,0); 
    -webkit-transition: -webkit-transform 0.5s; 
    transition: transform 0.5s; 
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 
    transition-timing-function: cubic-bezier(0.2,1,0.3,1); 
} 

.nav--beca .nav__item--current .nav__item-title span { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

Javascriptを

(function(window) { 

    'use strict'; 

    function init() { 
     [].slice.call(document.querySelectorAll('.nav')).forEach(function(nav) { 
      var navItems = [].slice.call(nav.querySelectorAll('.nav__item')), 
       itemsTotal = navItems.length, 
       setCurrent = function(item) { 
        // return if already current 
        if(item.classList.contains('nav__item--current')) { 
         return false; 
        } 
        // remove current 
        var currentItem = nav.querySelector('.nav__item--current'); 
        currentItem.classList.remove('nav__item--current'); 

        // set current 
        item.classList.add('nav__item--current'); 
       }; 

      navItems.forEach(function(item) { 
       item.addEventListener('click', function() { setCurrent(item); }); 
      }); 
     }); 

     [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) { 
      link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id); 
      new Clipboard(link); 
      link.addEventListener('click', function() { 
       link.classList.add('link-copy--animate'); 
       setTimeout(function() { 
        link.classList.remove('link-copy--animate'); 
       }, 300); 
      }); 
     }); 
    } 

    init(); 

})(window); 

Answer 1

私はあなたの質問を持っています、これはあなたに役立つでしょう。document.ready function（）に次のコードを追加してください。あなたが何をしたいか

var id_ele; 
$(".container-fluid .row").hover(function(){ 
id_ele = ''; 
id_ele = $(this).attr('id'); 
id_ele = '#' + id_ele; 
$('.nav--beca').find("a[href*='"+id_ele + "']").addClass('nav__item--current'); 
}, function(){ 
$('.nav--beca').find("a[href*='"+id_ele + "']").removeClass('nav__item--current'); 
});