Position fixed but still scrollable?

Question

Would it be possible to have a DIV position: fixed, but if the content of that DIV extend beyond the viewing area of the screen then you could still scroll with the window? I've put everything I have thus far in this...

FIDDLE

This code sits inside a media query that gets triggered when the screen hits a max width and/or a max height, but I don't think that code is relevant to my question. This is the bit of code that I believe I need to modify to work correctly:

.expand {
    display: block !important; 
    position: fixed;
    -webkit-backface-visibility: hidden;
    top: 50px;
    left: 0;
    background: rgba(31, 73, 125, 0.8);
    width: 100%;
    z-index: 999;
}

The reason I want this fixed is so the little hamburger menu stays statically in the upper left hand corner of the screen at all times, as at times the site I'm building could be rather lengthy, so I would like viewers to have a little more ease of access.

Thank you!

http://stackoverflow.com/questions/3837037/div-with-scrollbar-inside-div-with-positionfixed hm? — ventaquil, Jun 09 '15 at 23:28
That question never had a selected answer, so which answer were you referring to specifically? — Protocol Zero, Jun 09 '15 at 23:32
Many persons write about `overflow-y:scroll;` so I think it will help you with your problem. — ventaquil, Jun 09 '15 at 23:34
Yeah, using the overflow always adds a second scroll bar. I know I didn't say that in my post, but I'd prefer not to have that. — Protocol Zero, Jun 11 '15 at 22:48

score 5 · Accepted Answer · 2015-06-11T23:20:02.840

Yes, you just need to give the div a fixed height and the overflow: auto setting

(Demo)

.expand {
    bottom: 0;
    overflow: auto;
}

If you don't want to give it a minimum height, a simple (but not supported by old browsers) option would be to use css calc() like so

.expand {
    max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav.
}

I would suggest setting a fallback height before in case the browser does not support calc

JavaScript

To achieve what you really want you need javascript. Here it is.

Check to see if the menu is open, if not...

Define a check to see if the contents are larger than the viewport, if so then set bottom: 0px; and overflow: auto and remove scrolling from the body.

If so...

Remove all styles from the menu and the body that were added when opening the menu.

(Demo)

(function($) {
    var menu = $('.responsive-menu'), open;
    $('.menu-btn').click(function () {
        if(!open) {
            if(menu.height() > $(window).height()) {
                open = true;
                menu.css({'bottom': '0px', 'overflow': 'auto'});
                document.body.style.overflow = 'hidden';
            }
        } else {
            open = false;
            menu.css({'bottom': '', 'overflow': ''});
            document.body.style.overflow = '';
        }
        menu.toggleClass('expand');
    });
})(jQuery);

Position fixed but still scrollable?

1 Answers1