How to check if someone has scrolled to an element with jquery

Question

I need to know when a user has scrolled to a certain element with an id.

This is what I've tried:

$(window).on('load', function() {
  let elembestellen = document.querySelector('#bestellen');
  var bestellen = elembestellen.getBoundingClientRect().top;
  let eleminformatie = document.querySelector('#informatie');
  var informatie = eleminformatie.getBoundingClientRect().top;
  let eleminspiratie = document.querySelector('#inspiratie');
  var inspiratie = eleminspiratie.getBoundingClientRect().top;
  let elemreviews = document.querySelector('#reviews');
  var reviews = elemreviews.getBoundingClientRect().top;

  $(window).scroll(function(){
    w = Math.floor( $(window).scrollTop());

    if(window.outerWidth > 767) {
      // console.log(bestellen);

      if(  (w > parseInt(bestellen))  && (w < parseInt(informatie))     ){
        console.log('#bestellen reached');
      }

      if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w < parseInt(inspiratie))    ){
        console.log('#informatie reached');
      }

      // if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w > parseInt(inspiratie)) && (w < parseInt(reviews))   ){
      //   console.log('inspiratie');
      // }

      // if(w > parseInt(informatie)){
      //   console.log('informatie');
      // }

    }
  });
});

The problem is my console logs #bestellen reached at the correct time when I load the page all the way scrolled to the top. But if I scroll down a bit, and refresh the page, the logged #bestellen reached does not appear at the right moment again. It appears way to early.

How can I make sure the logs only fire when the element with the correct id has been reached on the page, no matter what part of the page is loaded?

Does this answer your question? [How to check if element is visible after scrolling?](https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling) — HoldOffHunger, Oct 07 '21 at 14:10
@HoldOffHunger Not really because I want the `if` statement to be true until the next element is reached, not when the current one is out of view. — twan, Oct 07 '21 at 14:16

Developer · Answer 1 · 2021-10-07T14:59:46.117

I have modified your code. Try this one.

$(window).on('load scroll', function() {
    let elembestellen = document.querySelector('#bestellen');
    var bestellen = elembestellen.getBoundingClientRect().top;
    let eleminformatie = document.querySelector('#informatie');
    var informatie = eleminformatie.getBoundingClientRect().top;
    let eleminspiratie = document.querySelector('#inspiratie');
    var inspiratie = eleminspiratie.getBoundingClientRect().top;
    let elemreviews = document.querySelector('#reviews');
    var reviews = elemreviews.getBoundingClientRect().top;
  
      w = $(window).scrollTop();
  
      if(window.outerWidth > 767) {
        // console.log(bestellen);
  
        if(  (w > parseInt(bestellen))  && (w < parseInt(informatie))     ){
            eleminformatie.style.backgroundColor="transparent";
            elembestellen.style.backgroundColor="red";
          console.log('#bestellen reached');
        }
  
        if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w < parseInt(inspiratie))    ){
            elembestellen.style.backgroundColor="transparent";
            eleminformatie.style.backgroundColor="red";
          console.log('#informatie reached');
        }
  
        // if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w > parseInt(inspiratie)) && (w < parseInt(reviews))   ){
        //   console.log('inspiratie');
        // }
  
        // if(w > parseInt(informatie)){
        //   console.log('informatie');
        // }
  
      }
  });

Note that:

As the variables are declared with keywords var and let inside the function. So, variables have local scope. If you also want to use the variables outside the function, you can just remove the keywords let and var with the variables. So, variables scope will get global scope.

Hi, this does not work. Still `#bestellen reached` is logged at different times depending on what part of the document currently scrolled was loaded. — twan, Oct 07 '21 at 14:39
What do you want to achieve exactly? The console log is writing the bestellen reached or informatie reached with the scroll. Plus The console log is also writing the bestellen reached or informatie reached depending on your scroll position. So, Even you refresh from the informatie position, it writes informatie reached. So please explain. — Developer, Oct 07 '21 at 14:46
I want to log #bestellen reached when the top of the screen touches the top of the #bestellen element and when scrolling further keep logging #bestellen reached until the top of the screen touches the top of #informatie element, then log #informatie reached until the next element is reached etc. — twan, Oct 07 '21 at 14:52
I am writing some code for a user to see what part of a page they are on. So I want to highlight buttons in a fixed top menu that highlight the active part of the page. — twan, Oct 07 '21 at 14:52
I have put background color red. Now check, you will see the effect. If a user is in the position of bestellen position, the color of the element get red. Now whether user refresh page from top or from down. It will change the background color of element depending on the position described by you. — Developer, Oct 07 '21 at 15:02

How to check if someone has scrolled to an element with jquery

1 Answers1