Vertikale Fest Navigation, wenn Abschnitte sind nicht in voller Höhe

Question

ich folgende fest Navigations Plug-in bin mit - https://codyhouse.co/demo/vertical-fixed-navigation/index.html

Es funktioniert gut, wenn jeder Abschnitt 100% Höhe hat, wie es in der Mitte des Abschnitts nimmt, aber Meine Abschnitte sind nicht 100% hoch.

Gibt es eine Möglichkeit, dies an die Arbeit mit kleineren Abschnitten anzupassen?

Here's a fiddle I created

Wie Sie sehen können, markieren Sie es nicht einmal die oberen oder unteren Abschnitte, da sie nicht in den Mittelpunkt des Bildschirms sind.

JS:

jQuery(document).ready(function($){ 
    var contentSections = $('.cd-section'), 
     navigationItems = $('#cd-vertical-nav a'); 

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

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

    //open-close navigation on touch devices 
    $('.touch .cd-nav-trigger').on('click', function(){ 
     $('.touch #cd-vertical-nav').toggleClass('open'); 

    }); 
    //close navigation on touch devices when selectin an elemnt from the list 
    $('.touch #cd-vertical-nav a').on('click', function(){ 
     $('.touch #cd-vertical-nav').removeClass('open'); 
    }); 

    function updateNavigation() { 
     contentSections.each(function(){ 
      $this = $(this); 
      var activeSection = $('#cd-vertical-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('is-selected'); 
      }else { 
       navigationItems.eq(activeSection).removeClass('is-selected'); 
      } 
     }); 
    } 

    function smoothScroll(target) { 
     $('body,html').animate(
      {'scrollTop':target.offset().top}, 
      600 
     ); 
    } 
}); 

Answer 1

bearbeiten: Ihre Abschnitt Container a% Höhe machen. zB: Höhe: 100% funktioniert nicht richtig mit einer festen Höhe.

Ändern Sie Ihre updateNavigation so, dass Sie nicht kopieren und einfügen, wie Sie sehen können, die if else Anweisung muss überprüft werden, ob Sie am Ende der Seite sind.

function updateNavigation() { 
    contentSections.each(function(){ 
     $this = $(this); 
     var activeSection = $('#cd-vertical-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('is-selected'); 
     } 
    else if(!$(window).scrollTop()){ 
    navigationItems.eq(activeSection).removeClass('is-selected'); 
    navigationItems.eq(0).addClass('is-selected'); 
    } 

    else if(check if you are at the bottom of the page not sure how){ 

    navigationItems.eq(activeSection).removeClass('is-selected'); 
    navigationItems.eq(navigationItems.length -1).addClass('is-selected'); 

    }else { 
      navigationItems.eq(activeSection).removeClass('is-selected'); 
     } 
    }); 
}