Content that scrolls with page, but is inside a fixed positioned sidebar (with shadow effect)

Question

I'm trying to develop following functionality for a sidebar. In a nutshell, Sidebar will have 100% height and will be absolutely positioned. Inside it there is content, which should scroll with the page, while sidebar is fixed. And as addition there is a shadow effect / response to show user if he can scroll down or up. So for example if there is something that can be scrolled down / up show shadow there, if not don't show shadow. I made a quick mockup, hopefully it will help you understand what happens if page is scrolled:

I made a quick jsfidle with content and sidebar, this is as far as I can get at the moment. http://jsfiddle.net/cJGVJ/3/ I assume this can't be achieved only with css and html and work cross browser, so jQuery solutions are welcome.

HTML

<div id="main"> <!-- Demo Content (Scroll down for sidebar) -->
    <!-- Demo content here -->
</div>

<aside id="sidebar">
    <div id="side-content-1"></div>
    <div id="side-content-2"></div>
 </aside>

CSS

body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
}

#page-wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

#sidebar {
    width: 30%;
    float: left;
    background: #ffffff;
    padding: 10px;
    height: 100%;
    position: fixed;
}

#main {
    width: 60%;
    float: right;
}

#side-content-1, #side-content-2 {
    height: 400px;
}

#side-content-1 {
    background: red;
    opacity: 0.4;
}

#side-content-2 {
    background: green;
    opacity: 0.4;
    margin-top: 10px;
}

EDIT Bare in mind content in sidebar sums up to less than one of the page content, so once it reaches the bottom (so when bottom shadow disappears) it should stay there, while main content can be still scrolled down.

Answer 1

This is still a little rough, but its a start:

I went through and polished it a little more and took care of some window resizing issues.

I think this will work for you:
Updated Working Example

JS

$(window).scroll(function () {
    var y = $(window).scrollTop();
    var x = $(window).scrollTop() + $(window).height();
    var s = $('#sidebar').height();
    var o = $('#side-content-1').offset().top;
    var q = $('#side-content-1').offset().top + $('#side-content-1').height();
    var u = $('#side-content-2').offset().top;
    if (x > s) {
        $('#sidebar').css({
            'position': 'fixed',
                'bottom': '0',
                'width': '27%'
        });
        $('#bottomShadow').hide();
    }
    if (x < s) {
        $('#sidebar').css({
            'position': 'static',
                'width': '30%'
        });
        $('#bottomShadow').show();
    }
    if (y > o) {
        $('#topShadow').show().css({
            'position': 'fixed',
                'top': '-2px'
        });
    }
    if (y < o) {
        $('#topShadow').hide();
    }
    if (y > q - 4 && y < q + 10) {
        $('#topShadow').hide();
    }
    if (x > u - 10 && x < u + 4) {
        $('#bottomShadow').hide();
    }

});
var shadow = (function () {
    $('#topShadow, #bottomShadow').width($('#sidebar').width());
});

$(window).resize(shadow);
$(document).ready(shadow);

CSS

body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
}
#page-wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
#sidebar {
    width: 30%;
    float:left;
    background: #ffffff;
    padding: 10px;
}
#main {
    width: 60%;
    float: right;
}
#side-content-1, #side-content-2 {
    height: 400px;
}
#side-content-1 {
    background: red;
    opacity: 0.4;
}
#side-content-2 {
    background: green;
    opacity: 0.4;
    margin-top: 10px;
}
#topShadow {
    display:none;
    height:2px;
    box-shadow:0px 5px 4px #000;
}
#bottomShadow {
    position:fixed;
    bottom:-3px;
    height:2px;
    width:99%;
    box-shadow:0px -5px 4px #000;
}