CSS Snap Scroll does not allow for jQuery scroll function to add or remove classes

So I have this implemented within my jquery file to detect if a certain div section is in viewport.

jQuery.fn.isInViewport = function($) {
	var elementTop = jQuery(this).offset().top;
	var elementBottom = elementTop + jQuery(this).outerHeight() / 2;
	var viewportTop = jQuery(window).scrollTop();
	var viewportHalf = viewportTop + jQuery(window).height() / 2;
	return elementBottom > viewportTop && elementTop < viewportHalf;
};

jQuery(window).on('load resize scroll', function($) {
	jQuery('.snappy').each(function() {
		var snapID = jQuery(this).attr('id');
		if (jQuery(this).isInViewport()) {
			jQuery('.sidenavitem').find("."+snapID).addClass("active");
			jQuery(this).addClass("in-view");		
		} else {
			jQuery('.sidenavitem').find("."+snapID).removeClass("active");
			jQuery(this).removeClass("in-view");
		}
	});
});

By itself, the .on('load resize scroll') function works and the active class gets added and removed but when I add this CSS style, the scroll function stops working and only works on the first one since there is load property

#main {
overflow-y: scroll;
  height: 100vh;
  
  scroll-snap-type: y proximity;
}

.snappy {
	scroll-snap-align: start;
    scroll-snap-stop: always;
	height: 100vh;
}

I am unsure if it's something within my CSS or my jQuery.

Any help would be greatly appreciated.

Here is a link to where I have implemented this:
https://dev.staging.idgadvertising.com/genesistint/

Shortly, the problem seems to be with the CSS properties for the #main element. The max-height: 100vh doesn't seem to play well with overflow-y: scroll.

By setting max-height: 100vh you are basically saying the #main element can only be as tall as the viewport height. And then by setting overflow-y: scroll you are explicitly instructing the browser to always show a vertical scrollbar, regardless of whether there is content overflowing or not.

This causes a conflict which results in jQuery(window).on('load resize scroll', function($) not triggering the callback function when the users scrolls the window.

Thus, the correct CSS could be either:

#main {
  max-height: 100vh;
  scroll-snap-type: y proximity;
}

or (I think this one is better):

#main {
  scroll-snap-type: y proximity;
}

You don't need overflow-y: scroll; in there since the page seems to be always taller then viewport height, so the window's scrollbar is always displayed automatically.

DIY DEBUGGING GUIDE:

Firstly, I would optimize the JS code for better debugging. Create a separate function named handleSideNav just for handling the side navigation. After that, u could apply that function when the window loads, then apply the same function when somebody scrolls or resizes the window.

Notice the console.log('Triggered event:', event); line which is for debugging - now u can see which event was triggered, if any event was triggered at all. Delete this line after you are done testing.

jQuery.fn.isInViewport = function($) {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight() / 2;
    var viewportTop = jQuery(window).scrollTop();
    var viewportHalf = viewportTop + jQuery(window).height() / 2;
    return elementBottom > viewportTop && elementTop < viewportHalf;
};

function handleSideNav(event) {
    console.log('Triggered event:', event);
    jQuery('.snappy').each(function() {
          var snapID = jQuery(this).attr('id');
          if (jQuery(this).isInViewport()) {
              jQuery('.sidenavitem').find("."+snapID).addClass("active");
              jQuery(this).addClass("in-view");       
          } else {
              jQuery('.sidenavitem').find("."+snapID).removeClass("active");
              jQuery(this).removeClass("in-view");
          }
      });
}

jQuery(window).on('load', handleSideNav);

jQuery(window).on('resize scroll', handleSideNav);

Now u can refresh and scroll the page and see if any events are being triggered. With your original CSS, you can see in the browser console, that the scroll event won't trigger when you scroll the page. That indicates the even though u are scrolling, the browser doesn't register that as window scrolling, thus the problem might be with your CSS.