Stop jQuery fixed position scrolling when bottom of scrolling element reaches bottom of parent element

Question

I have two columns – in most cases both longer than the parent element – so on default both should be scrollable at first. The shorter should stop scrolling, when it reaches the top of the parent.

In case the shorter column is longer than the parent: when the end of the shorter column ('sdidebar') becomes visible it should stop scrolling.

As far as I can see my question / my problem is quite close to the (answered) SE question "Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element" so I chose to name it similarly. The only difference/problem: the shorter column always stops at the top of the parent – even if it is longer than the parent – so the rest of the column would stay invisible. The solution for the above 'original' question suggests the following jQuery code:

$(window).scroll(function(){
    $("#theFixed").css("top",Math.max(0,450-$(this).scrollTop()));
});

So as I mentioned above, what I want instead is that the shorter 'sidebar content' stops when its end reaches the bottom of the parent element, if it is actually longer than the parent. If it is shorter than the parent it should just stick to the top of the parent and not be scrollable at all. Here's a fiddle with two such columns – but scrolling always stops at the top:

http://jsfiddle.net/1nkhc90k/

$(window).scroll(function(){
    $("#theFixed").css("top",Math.max(0,250-$(this).scrollTop()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:250px;background-color:red">SOMETHING</div>

STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

I tried the following modification – but with no success:

$(window).scroll(function(){
    $("#theFixed").css("bottom",Math.max(0,450-$(this).scrollTop()));
});

I know I should check for the length of each column – but I can't really get the pieces together. I hope someone has done this before? Any suggestions appreciated. Thank you!!

Answer 1

Is this what you need? http://jsfiddle.net/1nkhc90k/2/

$(window).scroll(function(){
    $("#theFixed").css("top",Math.min($(this).scrollTop()+150, $(window).height() - 20));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:150px;background-color:red">SOMETHING</div>

STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>