尝试使用 javascript/jQuery 在滚动条上添加导航突出显示 - 计算元素高度时出错

Question

我正在为 Free Code Camp 制作一个可滚动的投资组合页面，我正在尝试添加导航突出显示。通过这个，我的意思是我想做到这一点，以便在我滚动到一个部分的顶部（即从 "home" 部分到 "about" 部分）之后，导航 link 对应该部分应突出显示。这部分我其实已经想通了大部分。但是，有一个我似乎无法弄清楚的错误。在我到达实际部分之前，从我的投资组合部分到我的联系人部分的更改在导航中突出显示。你们有谁知道这是为什么吗？

我感觉这与我在javascript中使用.innerHeight函数有关，但我不确定。

这里是相关的javascript，我会在代码笔的底部有一个link。

    $(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

检查一下——通过捕获调整大小事件并重新计算高度，问题就消失了。

$(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

您可能已经注意到 window 调整大小后会出现此问题，这会影响元素的高度。通过捕获调整大小并将 innerHeight 代码放入可调用函数中，我们可以解决此问题。

尝试使用 javascript/jQuery 在滚动条上添加导航突出显示 - 计算元素高度时出错

Trying to add navigation highlighting on scroll with javascript/jQuery - Something wrong in figuring out height of elements

javascript

jquery

html

css

web-frontend