简而言之，问题似乎与#main元素的CSS属性有关。max-height: 100vh似乎不能很好地与overflow-y: scroll配合使用。
通过设置max-height: 100vh，您基本上可以说#main元素只能与视口高度一样高。然后通过设置overflow-y: scroll，您可以显式指示浏览器始终显示垂直滚动条，无论内容是否溢出。
这会导致冲突，导致当用户滚动window时，jQuery(window).on('load resize scroll', function($)不会触发回调函数。
因此，正确的CSS可能是：

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

或者（我认为这个更好）：

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

你不需要overflow-y: scroll;，因为页面看起来总是比viewport高，所以窗口的滚动条总是自动显示的。

DIY调试指南：

首先，我会优化JS代码，以便更好地调试。创建一个名为handleSideNav的单独函数，用于处理侧边导航。之后，你可以在窗口加载时应用该函数，然后在有人滚动或调整窗口大小时应用相同的函数。
注意console.log('Triggered event:', event);行，这是用于调试的--现在你可以看到哪个事件被触发了，如果有任何事件被触发的话。完成测试后删除此行。

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);

现在你可以刷新和滚动页面，看看是否有任何事件被触发。使用原始CSS，您可以在浏览器控制台中看到，当您滚动页面时，scroll事件不会触发。这表明即使你正在滚动，浏览器也不会将其注册为window滚动，因此问题可能与你的CSS有关。