Ändern Sie das aktuelle Menü auf Blättern

Question

Ich habe eine Seite mit mehreren Zeilen, jede Zeile enthält ein Hintergrundbild (Cover) mit etwas Inhalt oben, wie eine Diashow.

Ich habe auch ein Navigationsmenü, das die Anzahl der Folien auf der Seite anzeigt und wenn Sie auf Menüelement klicken, wird die Zeile in die Ansicht verschoben.

Das Problem ist, wenn ich scrolle und manuell in eine bestimmte Zeile verschiebe, bleibt das Menü gleich und zeigt an, dass es immer noch in der ersten Zeile/Folie ist.

Ich muss in der Lage sein, das aktuelle Element des Navigationsmenüs dynamisch zu ändern, wenn ich auch scrolle, im Moment funktioniert es, wenn Sie auf die Menüpunkte klicken, aber nicht auf Blättern.

Einfach die Klasse nav__item--current wechseln, wenn ich zu Zeile/Folie blättern.

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

Ich hoffe, ich habe Ihre Frage erhalten, und das wird Ihnen hilfreich sein. Fügen Sie Ihrer document.ready-Funktion() den folgenden Code hinzu.

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'); 
});