CODEWITHSUNDEEP
javascriptintersection-observer
Unnat
Unnat

Reputation: 416

Setting intersection observer's threshhold in pixels? or something like that?

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.

Upvotes: 5

Views: 2732

Answers (1)

Nikolay
Nikolay

Reputation: 535

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)

Upvotes: 8

Related Questions