Content that scrolls from the page but is inside a fixed sidebar (with shadow effect)

Question

I am trying to develop the following functionality for the sidebar. In a nutshell, the sidebar will have a height of 100% and will be absolutely positioned. Inside it there is content that should scroll with the page, and the sidebar is fixed. And as an add-on there is a shadow effect / response to show the user whether he can scroll down or up. For example, if there is something that you can scroll down / up, show the shadow there if you do not show the shadow. I made a quick layout, I hope this helps you understand what happens if the page scrolls:

I made a quick jsfidle with the content and sidebar, this is how much I can get at the moment. http://jsfiddle.net/cJGVJ/3/ I assume that this cannot be achieved only with css and html and work with a 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 The caring content in the sidebar sums up to less than one page content, so when it reaches the bottom (therefore, when the bottom shadow disappears), it should stay there while the main content can be scrolled down.

Answer 1

This is still a little rude, but its beginning:

I went through and polished it a bit and took care of some problems with window size.

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; } 

Answer 2

There is an article on CSS Tricks on Persistent Headers where they do something similar with a bit of jQuery