The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “jsfiddle”).

    I gathered the jquery to use for the menu from this [stackoverflow]( “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!


    # November 29, 2012 at 2:00 pm

    Hello ChrisP,

    This is a simple fix with overflows :D

    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.

    # 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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed