Upon inspection, I discovered that the class "scroll-lock" is not being added to the html element on your main page labeled "scroll-lock", but it is successfully added on the "ilinks-push" page. As a result, the condition checking for this class will never evaluate to true on your subpages. To address this issue, I modified the code to target the intended class named "responsive-menu-pro-open."

Furthermore, in order to ensure functionality across all subpages, it is crucial to grasp the logic implemented in the current codebase. I made some adjustments and included explanatory comments to enhance clarity:

$(document).ready(function() {
    var windowTop = 0;

    $('#responsive-menu-pro-button').click(function() {

        /* check if there is an ils item link */
        if ( $('.edge-ils-item-link')[0] ) {
            /* store the space above the element in a variable */
            var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
        }

        /****** Menu expansion *****/

        if ($('html').hasClass('responsive-menu-pro-open')) {

            /* scroll to the top of the page */
            windowTop = $(window).scrollTop(); 
            /* add the scroll-lock class */
            $('html').addClass('scroll-lock');
            
            /* check if there is an ils item link */
            if ( $('.edge-ils-item-link')[0] ) {
                /* restore the saved space to maintain original scroll position */      
                $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); 
            }
            
        }

        /****** Menu collapse ******/

        else { 
            $('html').removeClass('scroll-lock');

            /* check if there is an ils item link */
            if ( $('.edge-ils-item-link')[0] ) {
                /* utilize the saved space to reset the scroll position */
                $('.edge-ils-content-table').css('top', -offsetScrollList +'px');
            }

            $('html').scrollTop(windowTop);
        }

    }); 
}); 

You may have noticed sections where "check if there is an ils item link" is mentioned.

These are likely the segments that differ on your subpages.

By utilizing .offset().top, we capture the space above elements. However, this approach only functions effectively if elements with the ".edge-ils-item-link" class are present, hence why such implementation is enclosed within if statements.

In the current codebase, spaces above are used to correctly position elements, creating the appearance of a blocked scroll. Identifying the correct elements necessitates knowledge of their classes.

It is essential to maintain consistency by ensuring each page employs consistent classing around the content area. This facilitates targeting elements without requiring additional conditional checks in the JavaScript code.

Alternatively, numerous if clauses could be devised to inspect page elements. For instance, in your "scroll-lock" page, the "info-field" element might enable space configuration. Nonetheless, issues arise due to its fixed positioning conflicting with the addition of the "scroll-lock" class featuring "position: fixed;".

To rectify this situation, consider adjusting content layouts across subpages to streamline problem resolution. Constantly adapting JavaScript for varied subpage structures is impractical. Attempt standardizing subpages into dual columns using flexbox—perhaps maintaining a fixed left column while allowing scrolling within a static right column. The provided details lack specifics regarding your setup, thus hindering precise recommendations.

To ensure that the vertical scroll is only displayed when the content exceeds the viewport height, include min-height: 100vh; in the body tag.

Currently, the height of your document pages is limited to the combined height of relatively positioned children. Please see the screenshots below for reference. https://i.sstatic.net/rokZ6.png

https://i.sstatic.net/deDS7.png

After reviewing the required behavior, I believe the solution is straightforward and does not need to be overcomplicated:

Upon examining the pages and script behavior, it became evident that the scroll-lock class was not added to the DOM. However, you can simply rely on the presence of the responsive-menu-pro-open class being added to the HTML element after opening the menu. By applying CSS properties to this class, such as setting its position to fixed across all dimensions, you should be able to achieve the desired outcome. Please verify.

.responsive-menu-pro-open{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

I have tested this solution myself, and it worked flawlessly. Hopefully, this guidance proves helpful to you :)

For those facing this issue, the perfect solution lies within the Wordpress plugin you're utilizing, known as Responsive Menu. This plugin provides options for customization that can resolve the problem at hand. Personally, I have implemented it on my own website, Couv's Corner. Here are a few troubleshooting tips to consider:

• Ensure that the plugin is up-to-date, as recent updates have made significant improvements.
• Utilize sub-menus effectively by nesting menu items under parent categories where appropriate. Customize these settings in the "Menus" section of your admin dashboard.
• Review your theme. Consider exploring themes like Kadence WP to potentially identify any conflicts with the current theme you are using.
• Attempt to optimize your site's database and files, and clear cache/CDN if applicable. These steps could potentially help resolve the issue you are experiencing. I hope these suggestions prove helpful. Take some time to explore the plugin and observe how I have configured it on my personal site, and share your thoughts on it.