javascript - Position fixed but still scrollable? - Stack Overflow

admin管理员组

文章数量:1333201

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

Share Improve this question Follow edited Jun 10, 2015 at 14:41 user4639281 asked Jun 9, 2015 at 23:18 Protocol ZeroProtocol Zero 31922 gold badges44 silver badges1313 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptPosition fixed but still scrollableStack Overflow