垂直固定導航時部分不是全高

Question

我使用下列固定導航插件 - https://codyhouse.co/demo/vertical-fixed-navigation/index.html

它的偉大工程時，每節都有100％的高度，因爲它挑選部分的中心，但我的部分不是100％的高度。

有沒有一種方法來適應這與小部分工作？

Here's a fiddle I created

正如你所看到的，它甚至不突出的頂部或底部的部分，因爲它們不是在屏幕的中心點。

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

編輯：使你的部分集裝箱一％的高度。例如：高度：100％，固定高度時無法正常工作。

將您的updateNavigation更改爲如下所示，請勿複製並粘貼此代碼，因爲您可以看到if else聲明需要檢查您是否位於頁面底部。

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