navbarの現在のセクションをハイライト表示

Question

私はnavbarでスクロールしているページを持っています。そして、ユーザーがスクロールしているセクションをnavbarでハイライト表示します。現時点ではほぼ達成されていますが、間違ったリンクが強調されています。

デモはhttp://codepen.io/meek/pen/NNprYb?editors=1000

でこれを実行するコードで、次のとおりです。

// highlight current tab 
    $(window).on("scroll", function() { 

     var currentPos = $(window).scrollTop(); 

     $('.nav li a').each(function() { 
      var sectionLink = $(this); 
      var section = $(sectionLink.attr('href')); 
      if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) { 
       $('.nav li').removeClass('active'); 
       sectionLink.parent().addClass('active'); 
      } 
      else { 
       sectionLink.parent().removeClass('active'); 
      } 
     }); 

    }); 

、私はいくつかのことを試してみたが、それは確実にアクティブなクラスを追加することができません正しいセッション。ヘルプは高く評価しました！

編集：問題が明確になるように、セクションをハイライト表示するのは、上部を右に移動するのではなく、上部をスクロールするときにセクションをクリックするだけですセクションは自動的に強調表示されません。

EDIT2：だからにif文を変更：問題を完全に固定されていないものの、

if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) { 

が改善してきました。自宅、ポートフォリオ、およびポートフォリオセクションはすべて、正しいリンクを強調表示しますが、連絡先は表示しません。

Answer 1

ナビゲーションバーの高さを考慮に入れて、ハイライトしたいセクションの上部からそれを引く必要があります。

現在、高さはCSSで75pxでハードコードされていますが、小さな画面では変更/削除が必要な場合は、高さのjQueryセレクタが含まれています。

途中でニース作業。

$(window).on("scroll", function() { 
    var currentPos = $(window).scrollTop(); 

    $('.nav li a').each(function() { 
    var sectionLink = $(this); 
    // capture the height of the navbar 
    var navHeight = $('#nav-wrapper').outerHeight() + 1; 
    var section = $(sectionLink.attr('href')); 

    // subtract the navbar height from the top of the section 
    if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) { 
     $('.nav li').removeClass('active'); 
     sectionLink.parent().addClass('active'); 
    } else { 
     sectionLink.parent().removeClass('active'); 
    } 
    });   
});