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!

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!

• javascript
• css

• stackoverflow./questions/3837037/… hm? – ventaquil Commented Jun 9, 2015 at 23:28
• 1 That question never had a selected answer, so which answer were you referring to specifically? – Protocol Zero Commented Jun 9, 2015 at 23:32
• Many persons write about overflow-y:scroll; so I think it will help you with your problem. – ventaquil Commented Jun 9, 2015 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 Commented Jun 11, 2015 at 22:48

1 Answer 1

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);