IntersectionObserver showing infinite entries

Question

I am currently working on a portfolio website project using HTML, CSS, PHP and JavaScript. I have almost completed it. There is one issue I am facing and having hard time fixing it. So I have made sticky navigation bar using IntersectionObserver. And I have made the website responsive. So the sticky navigation bar is working fine with all the screens except for smaller mobile screens.

So basically I have attached IntersectionObserver to home section and it works fine for big screens by throwing one Intersecting entry and displaying the sticky navigation, but for smaller screens as soon as I reach about-section , it keeps throwing unlimited entries ('I checked them in console'). And I am not able to find why is it happening. A help will be much appreciated.

Here is the link to the project , Just go to smaller screen where you can see hamburger menu icon and then try going just to the start of about-section, the screen will keep shaking until you move the scroll from that position.

@JoePythonKing the code is inside my github link, please check it. There is a lot of code for JS, html and CSS, so I cannot write it here. — Lovish, Jan 26 '22 at 05:50
@Lovish No, you need to [edit] your post and create a [mre]. See [Something in my web site or project doesn't work. Can I just paste a link to it?](//meta.stackoverflow.com/q/254428/4642212) — in short: no. — Sebastian Simon, Jan 26 '22 at 05:56
@SebastianSimon I have tried making separate reproductive example, but it works fine. There is something wrong with my project css i guess which I cannot find. I also deployed the website online so no one has issue opening it. Here is the link - http://64.227.167.211/ . Please help — Lovish, Jan 26 '22 at 09:26
Untested thoughts. I was looking at the github files. portfolio/script.js has rootMargin: "-64px". That seems a bit strange - you decrease the root by 64 pixels on all sides of the viewport. So, on a mobile device it would be quite small ? Your description in the question seems to be incorrect. You have 'observer.observe(sectionHome);' This sectionHome is a bigger div than the 'about-section'. You can have a percentage in the rootMargin to make it more responsive? Untested. — JoePythonKing, Jan 26 '22 at 09:39
I tried in webdeveloper tools in firefox in responsive mode and got the loop of infinite entries. The intersectionobserver adds or removes the class which make the section fixed. In css you can have a sticky position - position: sticky; So, when you scroll it should stay at the top. Not sure why you would need intersectionobserver to do this. — JoePythonKing, Jan 26 '22 at 13:08
@JoePythonKing Thanks for replying and giving the time. Firstly, thanks for correcting, I realised I was writing "about-section" instead of "home". Secondly, I am adding "-64px" rootMargin so that it shifts the navigation bar 64px upwards which is the height of my navigation bar. Third, I am using intersectionObserver instead of position:sticky; bcoz I want to add that sticky navigation after I reach the point where "home" section ends and "about-section" starts. — Lovish, Jan 26 '22 at 16:03
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Feb 01 '22 at 14:40

JoePythonKing · Answer 1 · 2022-01-28T21:57:48.350

I think the original problem was the continuous invocation of the intersectionobserver. This seemed to occur exactly when the bottom of the target touched/was just 1 pixel above the top of the root. The 2 areas were not overlapping but touching. Target bottom was on pixel 100 and root top was on pixel 101 for example. Now, the intersectionobserver has 2 if statements which causes the body element to have a 'nav-scrolled' class added/removed to/from it. This adding of the class "nav-scrolled" causes this css rule to be matched "nav-scrolled .nav-bar". That rule causes position fixed of the nav-bar. It is actually quite difficult to scroll so the target and the root touch at the borders. I think a different solution would be to make the threshold in the intersectionobserver option be 0.01. Originally the threshold was 0 - zero, which means the io is called when at least 1 pixel intersects the root. I think this intersection can include being adjacent. The added class seems to slightly change the position of some elements.
So one solution could be to change the threshold. I chose to adjust the callback code which seems more robust. This code checks the bottom edge of the target and the top of the root.

if(entry.boundingClientRect.bottom  < entry.rootBounds.top){
    body.classList.add("nav-scrolled");  
  }else{
    body.classList.remove("nav-scrolled");
  } 

replace 

if (!entry.isIntersecting) {
      body.classList.add("nav-scrolled");
     
    }
    if (entry.isIntersecting) {
      body.classList.remove("nav-scrolled");
     
    }

IntersectionObserver showing infinite entries

1 Answers1