CODEWITHSUNDEEP
javascriptjquerycss
Dimitris
Dimitris

Reputation: 35

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

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.

Upvotes: 0

Views: 860

Answers (1)

Radu Marinescu
Radu Marinescu

Reputation: 66

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

Upvotes: 2

Related Questions