So I recently added this smooth scroll script, so I had to put all contents into a div block.
Now I’m facing a problem where when the menu which is (fullscreen) still allows to scroll even though I have set its position to fixed.
Carl, tomorrow I’ll definitely look at your project. I assume you inserted luxy.js for smooth scrolling? if yes, then see: this script prohibits the use of elements with a fixed position. Therefore, you need to render the ABOVE divblock with luxy.js. your menu should not be inside a smoothly scrolling div
The Finsweet approach does work but body scoll is triggered by the user clicking / pressing the nav menu button directly. Personally I feel safer detecting the css classes that the nav menu button has to determine if it is open or not, then to respond accordingly by allowing the body to scroll / not scroll.
I handle this with custom code by using a mutation observer on the nav menu button element. When the nav menu button has class w--open, it means that the menu is open, so body overflow is hidden which stops scrolling. Then when w--open is removed, body overflow is set back to auto to allow scrolling.
Add this to your site wide body code:
<script>
// Stop body scroll when mobile menu is open
const body = document.body;
function letBodyScroll(bool) {
if (bool) {
body.style.overflow = 'hidden';
} else {
body.style.overflow = 'auto';
}
}
const targetNode = document.querySelector('.w-nav-button');
const config = { attributes: true, childList: false, subtree: false };
const callback = function (mutationsList, observer) {
for (let i = 0; i < mutationsList.length; i++) {
if (mutationsList[i].type === 'attributes') {
const menuIsOpen = mutationsList[i].target.classList.contains('w--open');
letBodyScroll(menuIsOpen);
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
</script>
FYI if you have multiple webflow navbar elements on the page this will only work for the first one.
Firstly, you do not have a smooth scroll.
Secondly, see my published link.
You throw all the content into a div with id “luxy”. And the menu is above this block.
And finally, so that the menu opens in full screen and does not scroll, you need this script: https://www.flowbase.co/guides/guide-lock-scroll-on-click
This is excellent @jasondark Thanks for this mutation observer approach. One issue i face here is if i close the nav, the body is still locked. Did you find a way to unlock that after the menu close?
Hey @jasondark
When i’m scrolling down and open the menu it is still scrollable. But when i’m scrolling up it isn’t. Any idea why this is the case and how I can fix this issue?
I’m struggling to lock the body from scrolling when the hamburger menu opens. It happens on desktop through mobile view. Also, my nav bar animates up and away which pulls the menu out of view by 95px. The issue is when the body is scrolling behind the hamburger menu, the hamburger menu goes up 95px too.
Hi @jasondark, your custom code worked perfectly, thank you! I’m trying to get it to work only on mobile and not on desktop - is there a way to apply it just to certain breakpoints?
I have a similar problem, only in my case I used an animation on my mobile nav element that triggers another (mobile nav dropdown) element when clicked so it pops up. When you click it for the second time, the mobile nav dropdown disappears again.
This means I don’t have 2 different classes which won’t make it work in my case.
Does anybody knows how I should tackle this problem?
Thanks in advance for any tips & help