Sidebar Scroll

by LyndseyB

HTML

<div id="wrapper">
    <header>  </header>
    <div id="sidebar"> 
        <ul>
            <li> Test Link </li>
            <li> Test Link </li>
            <li> Test Link </li>
            <li> Test Link </li>
            <li> Test Link </li>
        </ul>    
        
        <div id="albums">
             <img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg"  style="display:block; height:150px;width:90%; margin:0 auto;"  />
            <span> Sale </span>
            <span> New In </span>
            <span> Special Offer </span>
            <span> All Items </span>
            
        </div>
    </div>
    <div id="content"> 
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img src="http://i1284.photobucket.com/albums/a564/krasi68/nature/1260238_960x854_zps0791e481.jpg" />
<img...

CSS

#wrapper { width:100%; }
header { background:#eee; height:100px; }
#sidebar { float:left; width:30%; }
#sidebar ul { padding:0; margin:20px 0; position:relative; }
#sidebar ul li { list-style:none; padding:10px 0; background:#eee; margin:10px 0; width:100%;}
#content { float:left; width:70%; background:#f9f9f9; }
#content img { width:30%; float:left; margin:1.6%; }
footer { height:300px; background:#dddddd; clear:both; }
#albums span { display:block; background:#dacabf; padding:10px; text-align:center; margin:10px auto; width:83%;}

JavaScript

$(function() {    
    albums = $('#albums');
    content = $('#content');
    offset  = albums.offset();
    offset_content = content.offset();
    topMargin = 50;
   //scroll function 
    $(window).scroll(function() {        
        if ($(window).scrollTop() > offset.top) {
            if ($(window).scrollTop() < (834 - 50)) {
                albums.stop().animate({
                     marginTop: $(window).scrollTop() - offset.top + topMargin +'px'                    
                });
            }
        } else {
            albums.stop().animate({ 
                marginTop: 0
            });
        }
    });
});