Floating Sidebar - Stop When Endpoint Reached

by bizamajig

HTML

<div class="header">Header</div>
    
<div class="sidebar">Sidebar</div>

<div class="content">Content</div>

<div class="footer">Footer</div>

CSS

.header {
    background:#ccc;
    height:260px;
    margin-bottom:20px;
}
.sticky-wrapper {
	float:left;
}
.stuck {
	position:fixed;
	top:20px;
    left:0;
}
.sidebar {
    background:#ff0000;
    height:350px;
    width:90px;
    margin-right:10px;
    float:left;
}

.content {
    background:#666;
    height:900px;
    width:300px;
    float:left;
}

.footer {
    background:#333;
    height:200px;
    width:100%;
    clear:both;
}

JavaScript

$(document).ready(function() {
    
    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal >= 0 && scrollVal < 260 ) {
            $('.sidebar').removeClass('stuck').css({'margin-top':'0px'});;
            $('.content').css({'margin-left':'0px'});
        }else if ( scrollVal > 260 && scrollVal < 800 ) {
            $('.sidebar').addClass('stuck').css({'margin-top':'0px'});;
            $('.content').css({'margin-left':'100px'});
        }else if ( scrollVal > 800 ) {
            $('.sidebar').removeClass('stuck').css({'margin-top':'540px'});
            $('.content').css({'margin-left':'0px'});
        }
    });
});