After encountering a similar issue with locking the vertical scroll while opening a mobile menu on a website I'm working on, I came across a potential solution HERE. However, despite trying to implement it, I haven't been successful. The main problem I faced was that the page would jump to the top whenever the menu was opened.
Here is the jQuery code snippet:
timber.openDrawerMenu = function () {
var tempScrollTop = $(window).scrollTop();
var $mobileMenu = $('.nav-bar'),
$mobileMenuButton = $('#menu-opener'),
$body = $('body');
$mobileMenuButton.addClass('opened');
$mobileMenu.addClass('opened');
$body.addClass('opened-drawer');
// Make drawer a11y accessible
timber.cache.$navBar.attr('aria-hidden', 'false');
// Set focus on drawer
timber.trapFocus({
$container: timber.cache.$navBar,
namespace: 'drawer_focus'
});
// Escape key closes menu
timber.cache.$html.on('keyup.drawerMenu', function(evt) {
if (evt.keyCode == 27) {
timber.closeDrawerMenu();
}
});
console.log(tempScrollTop);
$(window).scrollTop(tempScrollTop);
}
Despite adding a console.log() statement to check the scrollTop value, the script doesn't seem to be setting the scroll position as intended. I'm unable to pinpoint the exact reason for this issue. Any assistance in resolving this matter would be highly appreciated.