javascript - Setting intersection observer's threshhold in pixels? or something like that? - Stack Overflow

admin管理员组

文章数量:1391995

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.

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.

• javascript
• intersection-observer

Share Improve this question Follow asked Nov 4, 2021 at 10:12 UnnatUnnat 41644 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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)

本文标签： javascriptSetting intersection observer39s threshhold in pixels or something like thatStack Overflow