Fixed Left Bar

by Apple Ilagan

HTML

<div class="wrapper_btm">
    <div class="wrapper_slideshow">
        <img src="http://lorempixel.com/400/200" />
    </div>
    <div class="sidebar">
        <div class="logo">
            <img src="http://www.jdnapavalley.com/wp-content/themes/jdnapavalleyv2/images/logo.png">
        </div>
    </div>
    <div class="main"></div>
</div>

CSS

.wrapper_btm {
    width:100%;
    height: 100%;
}
.sidebar {
    width:300px;
    height:100%;
    left:0;
    top:0;
    position:fixed;
    background:#ddd;
    z-index:999;
}
.logo {
    width:100%;
}
.logo img {
    width:100%;
}
.main {
    width:70%;
    min-width:700px;
    height:100%;
    left:300px;
    top:0;
    position:fixed;
    background:#ccc;
    z-index:0;
}
.wrapper_slideshow {
    position:absolute;
    width:100%;
    top:0;
    z-index:99;
    background:#000;
    left:0;
}
.wrapper_slideshow img {
    width:100%;
}

JavaScript

resizeSlideshow();
jQuery(window).resize(resizeSlideshow);

function resizeSlideshow() {
    var origW = 1600;
    var origH = 500;
    var sidebarWidth = jQuery('.sidebar').width();
    var winWidth = jQuery(window).width();
    var newHeight = origH * winWidth / origW;
    jQuery(".wrapper_slideshow").css({
        "min-height": newHeight + 'px',
            "left": sidebarWidth + 'px',
    });
}