4

I am making a navigation which highlights the currently active page. I have an intersection observer that observes the 3 sections I have, the threshold is set to 0.5 (50%) which will trigger when 50% of a page is visible on the screen but, the problem is one of the 3 sections is too big to get 50% of it on the screen, which means that it will never be intersecting so, is there a way I can set the threshold in pixels instead of percentage of the page, like setting it to 200px will mean that the page is intersecting when 200 pixels of it is on the screen.
If this isn't possible then is there any workaround I can do to solve this?

Thanks, I appreciate any answer.

Unnat
  • 398
  • 2
  • 12

1 Answers1

2

you can use {rootMargin: "0px 0px -200px 0px"})

full example

let options = {        
    rootMargin: "0px 0px -200px 0px", 
    // or `0px 0px ${window.innerHeight / 2} 0px` 
    // for detect middle screen height
    threshold: 0
}


let callback = function(entries, observer){
    ...
}

let observer = new IntersectionObserver(callback, options)
Nikolay
  • 435
  • 5
  • 10