Scrolling for a fixed element

[ChrisP]

Good afternoon folks,

I’m running into a scrolling issue with a mobile navigation menu I’ve been working on, and can’t seem to find a solution, and was hoping someone might be able to shed some light on this.

Here’s a quick copy and paste of the site on [jsfiddle](http://jsfiddle.net/thatschris/7Txef/4/ “jsfiddle”).

I gathered the jquery to use for the menu from this [stackoverflow](http://stackoverflow.com/questions/8753024/how-to-make-a-sliding-menu-similar-to-the-facebook-mobile-side-menu-with-html-cs “stackoverflow”), as I’m not too handy with jQuery, but I did get most of it working how I want.

The problem: When the menu is expanded, if the page isn’t long enough, the menu section will not scroll further. I understand this is because I’m using `#headerNav { position: fixed; }` to position the element. My concern is that I’ve tried to switch to an absolute position, but that compensates for the menu, even though it’s out of the viewable area, and causes scrolling even though there’s no content visible for the scroll.

Ideally, I’d like only the menu to scroll if the content isn’t long enough to compensate for the height of the menu. If that isn’t possible, I’d at least like the page to extend to cover the entire menu ONLY if the menu is expanded. I’ve tried several different ways to get either of these results, but haven’t found a solution yet.

Any help would be greatly appreciated!

Thanks!

[otc]

Hello ChrisP,

This is a simple fix with overflows :D

#headerNav{

position: absolute;

overflow-y: scroll;

overflow-x: hidden;

}

Hope that helps ^^

[Watson90]

I have forked this JSFiddle for you.

http://jsfiddle.net/LBhBK/

[Watson90]

@otc’s solution also works, but don’t use the overflow-x property, as this gets rid of the menu completely.

[Author]

Posts