How to stop fixed/floating div at a specific point

I realize there are many questions similar to mine on this site, but because their original code is so different than mine, I have not been able to use their solutions though I tried a million different ways.

I'd like to make this green box stop at a certain point. It behaves exactly like I want it to minus covering the hbar at thebottom and the words stop/post. I'd like it to stop much higher than this at a point that I chose.

Please see my demo here: http://jsfiddle.net/Kachish/RqELN/1/

Below is the Javascript and CSS:

Javascript:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

    $(document).scroll(function() {
        var useFixedSidebar = $(document).scrollTop() > 150;
        $('.important').toggleClass('fixedSidebar', useFixedSidebar);
    });

</script>

CSS:

.fixedSidebar {
    position: fixed;
    top: 10px;
}

Solution

Working fiddle based on yours.

JQuery:

$(document).scroll(function() {
    var scrollVal = $(document).scrollTop();
    $('.important').css('top',scrollVal+'px');
    if (scrollVal < 150) { 
        $('.important').css('top','100px');
    }
    if (scrollVal > 1347) {
        $('.important').css('top','1111px');    
    }
});

CSS:

.important { 
    position: absolute;
}