嘗試在javascript/jQuery上添加滾動導航突出顯示 - 在計算元素高度時出錯錯誤

Question

我正在使用Free Code Camp的可滾動投資組合頁面，並且正在嘗試添加導航突出顯示。通過這個，我的意思是我想讓它在滾過一個部分的頂部（即從「主頁」部分到「關於」部分）之後，與該部分對應的導航鏈接應該突出顯示。這部分我實際上大部分都是想出來的。但是，有一個我似乎無法解決的錯誤。在我到達實際部分之前，從我的投資組合部分到我的聯繫人部分的更改在導航中突出顯示。你們中的任何一個人都可能知道這是爲什麼嗎？

我有一種感覺，它與JavaScript中使用.innerHeight函數的事實有關，但我不確定。

這裏是相關的javascript，我將在底部有一個鏈接到codepen。

$(document).ready(function() { 

     var navHeight = $('nav').innerHeight(); 
     var componentEnd = []; 


     $('.component').each(function(){ 
     componentEnd.push($(this).offset().top + $(this).innerHeight() - navHeight); 
     }); 

     $(document).on('scroll', function() { 
     var pos = $(document).scrollTop(); 

     for (var i = 0; i < componentEnd.length; i++) { 
      if (pos <= componentEnd[i]) { 
      var index = i; 
       break; 
      } 
     } 

     $('.navbar-nav li') 
      .removeClass('nav-active') 
      .eq(index) 
      .addClass('nav-active'); 
     }); 
    }); 

Portfolio Page-Codepen

如果你們有什麼想法，我會很感激！我一直在這裏工作了一段時間。

Answer 1

檢查一下 - 通過捕獲resize事件並重新計算問題消失的高度。

$(document).ready(function() { 

    var navHeight = $('nav').innerHeight(); 

    $('.navbar-nav li a').click(function (event) { 
    $('.navbar-collapse').collapse('hide'); 
    }); 

    $('a[href^="#"]').on('click', function (e) { 
    e.preventDefault(); 

    var target = this.hash; 
    var $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollTop': ($target.offset().top - navHeight) 
    }, 900, 'swing'); 
    }); 

    var componentEnd = []; 

    // Create function to run heights whenever required 
    function getHeights() {   
    componentEnd = []; // empty old height 
    $('.component').each(function(){ 
     componentEnd.push($(this).offset().top + $(this).innerHeight() - navHeight); 
    }); 
    } 
    // run heights initially 
    getHeights(); 

    //capture window rezise 
    $(window).resize(getHeights); 

    $(document).on('scroll', function() { 
    var pos = $(document).scrollTop(); 

    for (var i = 0; i < componentEnd.length; i++) { 
     if (pos <= componentEnd[i]) { 
     var index = i; 
     break; 
     } 
    } 

    $('.navbar-nav li') 
     .removeClass('nav-active') 
     .eq(index) 
     .addClass('nav-active'); 
    }); 
}); 

https://codepen.io/anon/pen/YZZZOw

你可能已經注意到這個問題出現下圖的窗口大小調整，其效果爲元件的高度。通過捕獲調整大小並將innerHeight代碼放入可調用函數中，我們可以解決該問題。