Grow your CSS skills. Land your dream job.

Scrolling for a fixed element

  • # November 29, 2012 at 1:32 pm

    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
    # November 29, 2012 at 2:00 pm

    Hello ChrisP,

    This is a simple fix with overflows :D

    #headerNav{
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    }

    Hope that helps ^^

    # November 29, 2012 at 2:37 pm

    I have forked this JSFiddle for you.

    http://jsfiddle.net/LBhBK/

    # November 29, 2012 at 2:38 pm

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

    # November 29, 2012 at 3:21 pm

    Thank you both for your suggestions. Unfortunately, I’ve tried this already, the issue I have is applying an absolute position to `#headerNav` causes the navigation to anchor at the top of the page.

    To be more specific, my goal is to have the menu slider button absolutely positioned at the top of the viewport, but when the `#headerNav` when is expanded, scroll through the navigation menu with a separate scrollbar. Does that make sense?

    **Edit:** I’ve also just noticed that when using the absolute positioning for the headerNav, it causes a horizontal scroll when the menu is expanded.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".