HTML / CSS Column Scrolling

Question

I have two columns on my page.

The left column is one long list, the right is smaller.

When I scroll up and down I want the right column to float with the page not be static.

I've managed to get this working using this css:

    .connected {
        min-height:100px;
        float: left;
        width: 200px;
    }
    .connected.right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

and can be seen here on this FIDDLE.

The issue I have is if the right column is long, then it doesn't move at all and the bottom entries aren't accessible.

Is there any way to get the right column to scroll but only until you reach the end of it, then it is fixed untill you start scrolling back up ?

Thanks

Answer 1

What about setting overflow: auto; to the right column?

.connected.right {
    position: fixed;
    overflow: auto;
    min-height:100px;
    height: 200px;
    float: right;
}

This will set a scroll to it and will allow scrolling until the very end of the column.

Demo: https://jsfiddle.net/8fxosb5f/2/

Or you can remove the window scroll by setting overflow: auto to both columns. But that way you need to set a certain height of those columns. The result might not be what you need, still here's a demo:

https://jsfiddle.net/8fxosb5f/3/

Here's a really rough code, but I think you will manage to set it to fit your needs: (it requires jQuery)

var columnHeight = $('.right').outerHeight(true);

var windowHeight = $(window).height();
$(window).scroll(function () {

    if ($(this).scrollTop() + windowHeight >= columnHeight) {
        $('.right').css({
            position: 'fixed',
            top: -(columnHeight - windowHeight)
        });
    } else {
        $('.right').css({
            position: 'static',
            top: 'auto'
        });
    }
});

Demo: https://jsfiddle.net/8fxosb5f/5/

Answer 2

You wrote the css is incorrect

.connected.right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

change it to

.connected .right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

working example here