Scroll to bottom of content, then position fixed until scrolled back up again

JavaScript
1

I have a window, say 600px high. I have two columns of content within the window, the left being 1200px high and the right being 800px high. Obviously when the scroll gets to the bottom of the document there is a huge empty space where the right column has no content below 800px. What I want is for the right column to have position: fixed; bottom: 0 when it has reached the bottom of the screen, while the left column continues to scroll. When the user scrolls back up, the right column should begin scrolling again to show the content at the top.

Anyone have a clue how I can accomplish this? I’m using JQuery so I can easily get window and dom element heights and attach the function to scroll and resize events, but the algorithm is doing my head in and it really ought to be quite simple :blush:

2

Would taking inspiration from here help?
Creating a Floating HTML Menu Using jQuery and CSS

3

and there’s this floating menu without jquery or what imho could be a better option and to set the height of the left div to the height of the right div and set overflow: auto on the left div

4

Thanks guys,

The JQuery menu isn’t quite right, that only calculates from the original position at the top of the page. The option to put overflow: scroll on the left column isn’t acceptable, the client wants the browser window scroll bar to do the scrolling and not a scroll bar on the column div. I cracked it though! Seems I was very close but not taking the padding top and padding bottom into account, so it was chopping off the bottom 26px of the content, which made me thought I was completely off-mark. Turns out when I added the padding all my logic came right and it works now!

Here’s the code I’ve ended up with:


var sc = {

    [... properties ...]

    scroll : function(){
        var height = $(window).height();
        var scroll2Height = $('#'+sc.scroll2Id+' .bloggerProfile').height()+sc.scroll2PaddingTop+sc.scroll2PaddingBottom;
        var scrollPosition = $(window).scrollTop();

        if(scroll2Height > height){
            $('#'+sc.scroll2LineId).css('height', scroll2Height+'px');
        }else{
            $('#'+sc.scroll2LineId).css('height', height+'px');
        }
        
        if(scrollPosition+height >= scroll2Height){
            $('#'+sc.scroll2Id).css({position: 'fixed', top : '-'+(scroll2Height-height)+'px'});
        }else if(height >= scroll2Height){
            $('#'+sc.scroll2Id).css({position: 'fixed', top : 0});
            $('#'+sc.scroll2ContentId).css('height', height+'px');
        }else{
            $('#'+sc.scroll2Id).css({position: 'absolute', top : 0, right : sc.iconHolderWidthClosed+'px'});
        }

        if($(window).scrollTop() == $(document).height() - $(window).height() && !sc.hasLastPost && !sc.loadingBlogPosts){
            sc.loadNextBlogPosts();
        }

    }
}


$(window).scroll(function(){
      sc.scroll();
});
5

This is awesome Studio Junkies. I’ve been searching for some code to help me do this exact thing. I have a short column on left, long column on right and want both columns to scroll when the page is scrolled, but the short column to stop scrolling when it gets to the end of it’s content. I’ve see other sites do it so I knew it could be done. Any tips for implementing your code on my site? I’ve used jQuery quite before, but not to this extent.
Thanks
Mike