How to consider sticky header as offset with intersection observer api?

JavaScript
1

So I have a sticky navbar, and the problem is the instance of intersection observer that is intersecting (entry.isIntersecting) considers the portion of the sticky menu even though the intersecting item is not shown as it is behind the navbar. I would like to apply an offset so that it only considers the real visible area without the navbar area. Tried playing with rootmargin, threshold and root properties so far. Do note im using scroll-padding-top: 80px;

2

You could try replacing scroll-padding-top with scroll-margin-top because padding in an element is still considered to be a part of that element, whereas margin is a physical separation of elements.

3

Thank you will try and report back :wink:

1 Like
4

I’m afraid it made no difference :confused:

5

At this point, I would recommend sharing a live sample of your code so that we can better see what you’re trying to accomplish and what you have.

You can host it on something like Codepen, JSFiddle, Replit.com, or any other service where we can see the code and run it.

6

I believe you should be able to use the rootMargin option to account for the header height. But we do not know what you have tried and I guess it might also depend on what you are actually using the observer for. As said, without a live example it is kind of hard to help (if we can).

Example using rootMargin

7

Ok, question: is generally useful or good idea to post a live page for which the code is in use? Would it be good enough?

8

It would be better if it was an online editor. But any code is better than no code.

9

It will take me a bit to release the page above mentioned, once I do I will post it here.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.