垂直固定ナビゲーションのセクションでは、完全な高さ

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

編集：あなたのセクションのコンテナ％の高さを作ります。 ex：height：100％固定の高さでは正しく動作しません。

あなたのアップデートを変更してください。このページの下部にあるかどうか確認するために、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'); 
     } 
    }); 
}