JQuery position() and offset() methods not working

Question

I'm a beginner programmer and I'm trying to create this effect that when I scroll past a specific element in the HTML, The colors of the buttons in my navbar change colors. I thought the correct way of doing this was jQuery. I'm having problems getting the position of the elements in the page. I have tried with the position() and offset() methods. But neither seem to work.

I want to get the vertical positions of the elements with the IDs "info" and "security". I have these methods aren't very reliable in certain cases, but I can't find an alternative.

This is the code I have so far:

   $(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");
        }
      }    
    });`

Thank you for the advice in advance!!

score 1 · Answer 1 · answered Oct 19 '21 at 06:18

The objective mentioned is to let NAV bar change based on the position that you scrolled to. First you need to get your target ID scroll position.Use code below to get every archor element ID:

$('#testB').position().top

(In jQuery, position will return you the left and top value, here we use top only.) Second, get the current scroll position.Use code below:

currentHeight = $(window).scrollTop();

Third, write related jQuery code to change NAV elements.Sample JS as below: Here we have 5 DIV (#testA to E) and 4 nav buttons (#test1 to 4)

$(window).scroll(function () {
var currentHeight = $(window).scrollTop();
if (currentHeight <= $('#testB').position().top) {
    $("#test1").addClass('active-blue');
    $("#test2").removeClass('active-blue');
    $("#test3").removeClass('active-blue');
    $("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testC').position().top) {
    $("#test1").removeClass('active-blue');
    $("#test2").addClass('active-blue');
    $("#test3").removeClass('active-blue');
    $("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testD').position().top) {
    $("#test1").removeClass('active-blue');
    $("#test2").removeClass('active-blue');
    $("#test3").addClass('active-blue');
    $("#test4").removeClass('active-blue');
} else {
    $("#test1").removeClass('active-blue');
    $("#test2").removeClass('active-blue');
    $("#test3").removeClass('active-blue');
    $("#test4").addClass('active-blue');
}

});

Hi! Thank you for the help, but the logic of the program is the same as the one I proposed. The problem is that the .position().top method doesn't work. — HCook886, Oct 19 '21 at 15:28

SinanKH · Accepted Answer · 2021-10-19T16:57:36.120

1

Here you go.

    //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");
        }
      }    
    });`

First get a good understanding of how variables work and please try to use let instead of var most of the time while declaring variables. This will prevent accidentally overwriting global variables.

edited Oct 19 '21 at 16:57

answered Oct 19 '21 at 06:48

SinanKH

81
4

Hey. Thank you for the answer, but I can't seem to get it working. The scrollTop() method seems to give me the distance to the top of that element, but I need the position of an element in relation to the #content container. Is there any way this method can be used differently or do I have to use another method? Thank you in advance! – HCook886 Oct 19 '21 at 15:00
1

@HCook886 if you want to get the position of an element in terms of it's parent container. Try `position()`, and also check the docs of [position()](https://api.jquery.com/position/) and [offset()](https://api.jquery.com/offset/).Hope you can figure it out. – SinanKH Oct 19 '21 at 16:06
I may have not made it very clear. My problem is that the offset() and the position() methods aren't working for me because of this: "Note: jQuery does not support getting the position coordinates of hidden elements or accounting for margins set on the document element." I'm looking for an alternative or a solution. Thank you! – HCook886 Oct 19 '21 at 16:33
1

@HCook886 [This](https://stackoverflow.com/questions/5974323/get-the-offset-of-a-hidden-element) might help. – SinanKH Oct 19 '21 at 16:46

JQuery position() and offset() methods not working

2 Answers2