Stop page from going to the top after making body position fixed

Question

Hello this is my first post.

I am searching a lot here but I can't figure out how to stop my page from going to the top after adding position fixed to the body.

What I want is similar to this but I cant make it work Prevent page scrolling to top upon adding fixed position

Let me make myself clear. When my mobile menu is opened I want to make the body non-scrollable (fixed) but adding position fixed makes my page go to the top.

CSS

.site-navigation { position: fixed; width: 100%; }
@media screen and (max-width: 991px) {
.is-menu-toggled-on .nav-menu {  
    height: 400px;
    overflow-y: scroll;
    overflow-x:hidden;} 

.is-menu-toggled-on body
    {
    position: fixed;
    overflow: hidden;
    width: 100%
    }

Look here. Every time I press the hamburger menu icon (3 lines) and the menu bar opens the page underneath scrolls back to top... An I want to make it unscrollable in its current position --> https://imgshare.io/image/SQzVZ

I know that this can work with some javascript I have tried lots of them from the site but I can't make it. If you could help me with that I would really appreciate it.

Well I dont know what you mean exactly but here is the full version of it .site-navigation { position: fixed; width: 100%; } @media screen and (max-width: 991px) { .is-menu-toggled-on .nav-menu { height: 400px; overflow-y: scroll; overflow-x:hidden;} .is-menu-toggled-on body { position: fixed; overflow: hidden; width: 100% }} This is from Wordpress theme ADDITIONAL CSS — Dimitris, Jun 27 '19 at 23:41
I dont know how to find that exactly...Its a custom theme from themeforest... Sorry I am kind of a noobie — Dimitris, Jun 27 '19 at 23:47
Shouldn't the page (``) be at the top of the screen? Or do you mean the menu is fixed to the top? Which part goes to the top that you don't want to? — showdev, Jun 28 '19 at 00:05
I made the menu fixed to the top, by adding site-navigation: position fixed — Dimitris, Jun 28 '19 at 00:06
When I open my mobile menu.... the menu block is scrollable...(i made that with overflow-y: scroll; ) But under the menu bar is the body.... I made it non scrollable but it goes up every time I open my mobile menu — Dimitris, Jun 28 '19 at 00:09
I assume the menu bar is inside the ``, but it's hard to tell without seeing a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Do you mean there's an unwanted gap between the top of the screen and the menu? — showdev, Jun 28 '19 at 00:10
Look here https://imgshare.io/image/SQzVZ Every time I press the hamburger menu icon to open the menu.... the body underneath goes to the top of the page...Because I made it fixed position — Dimitris, Jun 28 '19 at 00:14
Do you want the content of the page to be below the menu when the menu is open? Or just below the menu bar? — showdev, Jun 28 '19 at 00:15
I just want the body to stay fixed in the same position it was left by the user when someone opens up the menu. But now it goes to the top — Dimitris, Jun 28 '19 at 00:16

Radu Marinescu · Answer 1 · 2019-06-28T12:05:34.727

2

Instead of position: fixed; just add overflow: hidden; on html to prevent scrolling. Eventually touch-action: none; pointer-events: none;, too.

html {
    overflow-x: hidden;
    overflow-y: auto;
}

html.is-menu-toggled-on {
    overflow: hidden;
    pointer-events: none;
    touch-events: none;
}

body {
    overflow: visible;
    pointer-events: all;
    touch-events: auto;
}

edited Jun 28 '19 at 12:05

answered Jun 28 '19 at 00:10

Radu Marinescu

66
9

I have tried just overflow:hidden and it works on my smartphone but not on my ipad... :/ – Dimitris Jun 28 '19 at 00:21
Check if the @media condition applies for your ipad! It's screen width could be larger, and the css doesn't apply. – Radu Marinescu Jun 28 '19 at 12:08
I have checked this... Thats not the matter – Dimitris Jun 28 '19 at 14:09
Did you tried touch-events? I have updated my answer earlier. – Radu Marinescu Jun 28 '19 at 21:56
Post a link to your page, or it's entire content in a snippet. – Radu Marinescu Jul 01 '19 at 00:34
Are you able to locate the menu button's click event handler (that is the JavaScript function which gets called to open/close the menu)? What happens on your ipad, exactly? – Radu Marinescu Jul 01 '19 at 00:40
i found the class. its menu-toggle. that class runs when i press the button – Dimitris Jul 04 '19 at 15:57
That's the css class. You need to find the JavaScript function. Open the page on your desktop browser (Firefox/Chrome), press Ctrl+Shift+M (to enter mobile view), Right-Click on your menu button, and select Inspect Element. From there, inspect the HTML Code that appeared at the bottom of your screen (or on the right), paying close attention to the element that got selected (usually highlighted in blue). – Radu Marinescu Jul 04 '19 at 20:46
It, or one of it's parents, or one of it's descendants has a little label called "event", or "handler", or "listener", or "ClickEvent", depending on your browser. Click on that label, and it should take you to the piece of code that gets called when you click the button. Next, search part of that text (code) within the .js files you have, and paste the relevant content here. – Radu Marinescu Jul 04 '19 at 20:47

Stop page from going to the top after making body position fixed

1 Answers1