CODEWITHSUNDEEP
jqueryhtmlcss
Jackson Podger
Jackson Podger

Reputation: 47

2 columns - both scroll (left side stops with its content)

I have a 2 column layout. Left side content is shorter than the right side.

I am trying to achieve a way to have the page scroll normally, but when the left side content is at the bottom of the page I want it to stop scrolling while the right side continues.

Is this possible? Or would it be possible to accomplish this with a fixed height for the left column?

As of now 2 scrollbars appear. An example of my code is below. Also, here is the site I got the idea from: http://www.q107.com/

CSS

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
    position: absolute;
}
#leftShort {
    height:auto;
    height:auto !important;
    position:absolute;
    overflow-y: auto;
    left: 0;
    top: 0;
    right: 75%;
    padding: 2em;
    background: #eee;
}
#rightLong{
    position: fixed;
    left: 25%;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    padding: 2em;
    background: #ddd;
}

HTML

<div id="leftShort">
left side text
</div>


<div id="rightLong">
right side text

Upvotes: 3

Views: 1994

Answers (1)

Mark S
Mark S

Reputation: 3799

Yes you can get this done with jQuery. First I think you need to scroll on window:

$(window).scroll(function () {
    var winTop = $(this).scrollTop(),
        winBottom = winTop + $(this).height(),
        left = $('#leftShort'),
        leftBottom = left.height();
    //when the user reached the bottom of '#leftShort' set its position to fixed 
    //to prevent it from moving on scroll 
    if (winBottom >= leftBottom) {
        left.css({
            'position': 'fixed',
            'bottom': '0px'
        });
    } else {
        //when the user scrolls back up revert its position to relative
        // to make it move up together with '#rightLong'
        left.css({
            'position': 'relative',
            'bottom': 'auto'
        });
    }

});

See the demo on this jsfiddle: jsfiddle.net/d7BPv/

Upvotes: 2

Related Questions