DizzyDan Posted August 17, 2017 Share Posted August 17, 2017 Project Code: https://codepen.io/Digitango/pen/VzyZyO Project Description: I created a pretty basic push menu using jQuery. What I want to achieve is to click the menu bars, push the main-content over and display the menu. Then close the menu when you either click the menu bars again, click the close icon or click anywhere off the menu. So far I handled all of this successfully, however, one thing I don't like is if you scroll down on the main-content, then click the menu bars the main-content goes back to the top. It does this because I use toggleClass to change to 'position: fixed;' for main-content when the menu is open. I use position: fixed because if I use 'position: absolute;' for main-content instead I get horizontal scroll bars. I can't seem to find a simple solution to not have horizontal scroll bars AND not bring the main-content back to the top when the menu is open. It's not terrible with position: fixed; but I would like to gain an understanding or maybe achieve this a better way rather then settling. Note: Mind you my JavaScript & jQuery knowledge is pretty limited so there is probably a better way to handle this but here is where I am at and I'm open to any suggestions. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 17, 2017 Share Posted August 17, 2017 How about setting overflow-x? Link to comment Share on other sites More sharing options...
DizzyDan Posted August 17, 2017 Author Share Posted August 17, 2017 (edited) Like to the body tag? body{ overflow-x: hidden; } This seems to do the trick. Edit: Just wanted to clarify I had to also change .push-open from position:fixed; to position: absolute; Edit II: I also have to add a to .menu incase the menu height was taller then the window: .menu{ position: fixed; height: 100%; overflow-y: scroll; } Edited August 17, 2017 by DizzyDan Link to comment Share on other sites More sharing options...
DizzyDan Posted August 18, 2017 Author Share Posted August 18, 2017 Originally I thought it might have been a jQuery issue but this might make more sense in the CSS thread. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now