Page Scroll Under Position: Fixed Content

Have a fixed position div that needs to scroll if content overflows

The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

You can use fixed to accomplish what you're trying to do.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

This fork of your fiddle shows my fix:
http://jsfiddle.net/strider820/84AsW/1/

When scrolling, I want the position: fixed content to not move if it hits this (class)

This can be done with pure CSS with no JS, .fixedBox element should be reordered for this, like so:

ul,li { 
    margin: 0;
    padding: 0;
    list-style: none; }

#topArea {
    min-height: 200vh;
    background: #f4f4f4;
}

.fixedBox {
    position: sticky;
    width: 100%;
    padding: 30px;
    left: 0;
    bottom: 0; 
    border: 0;
    z-index: 88;
}

.fixedBox .fixedList { 
    color: coral;
    font-size: 30px;
    font-weight: 600;
}

.LimitPoint {
    width: 100%;
    height: 1px;
    background: red;
}

#bottomArea {
    position: relative;
    margin: 120px 0 0;
    padding: 0 5%;
}

#bottomArea ul div {
    position: relative;
    display: flex;
    flex-direction: row;
}

#bottomArea ul li {
    padding: 7px;
}

#bottomArea ul li img {
    width: 100%;
    height: auto;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="topArea"> </div>

<div class="fixedBox">
    <ul class="fixedList">
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </ul>
</div>

<div class="LimitPoint"></div>

<div id="bottomArea">
    <ul>
        <div>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
        </div>
        <div>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
        </div>
    </ul>
</div>

How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

You can do a percentage height as well:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Scroll part of content in fixed position container

It seems to work if you use

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

and add padding-bottom: 60px to div.sidebar.

For example: http://jsfiddle.net/AKL35/6/

However, I am unsure why it must be 60px.

Also, you missed the f from overflow-y: scroll;

Position fixed but still scrollable?

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

---

Related Topics