javascript - JQuery position() 和 offset() 方法不起作用

Question

我是一名初学者程序员，我正在尝试创建这种效果，当我滚动浏览 HTML 中的特定元素时，导航栏中按钮的颜色会改变颜色。我认为这样做的正确方法是 jQuery。我在获取页面中元素的位置时遇到问题。我尝试过使用 position() 和 offset() 方法。但似乎两者都不起作用。
我想获得 ID 为“info”和“security”的元素的垂直位置。我有这些方法在某些情况下不是很可靠，但我找不到替代方法。
这是我到目前为止的代码:

   $(window).on('load', function(){ 
      window.loaded = true;
      console.log("LOADED");
    });
    $( window ).scroll(function() {
      if (window.loaded == true){  
        var scrollTop = $(window).scrollTop();
        var infopos = $( "#info" );
        var secpos = $("#security");

        if (scrollTop >= 0 && scrollTop < infopos-25) {
            $( "#navgeneral" ).addClass("active");
            $( "#navinfo" ).removeClass("active");
            $( "#navsecurity" ).removeClass("active");
        }
        else if (scrollTop >= infopos && scrollTop < secpos){
            $( "#navgeneral" ).removeClass("active");
            $( "#navinfo" ).addClass("active");
            $( "#navsecurity" ).removeClass("active");
        }
      }    
    });`

提前谢谢你的建议!!

Answer 1

干得好。

    //Declare these first
    const infopos = $( "#info" ).scrollTop();
    const secpos = $("#security").scrollTop();

    $(window).on('load', function(){ 
      window.loaded = true;
      console.log("LOADED");
    });
    $( window ).scroll(function() {
      if (window.loaded === true){ 
 
        let scrollTop = $(window).scrollTop();

        if (scrollTop < infopos-25) {     //scrollTop >= 0 will always be true so skip it
            $( "#navgeneral" ).addClass("active");
            $( "#navinfo" ).removeClass("active");
            $( "#navsecurity" ).removeClass("active");
        }
        else if (scrollTop >= infopos && scrollTop < secpos){
            $( "#navgeneral" ).removeClass("active");
            $( "#navinfo" ).addClass("active");
            $( "#navsecurity" ).removeClass("active");
        }
      }    
    });`

首先要充分了解变量的工作原理，请尝试使用let而不是 var大多数时候在声明变量时。这将防止意外覆盖全局变量。