fixed sidebar without overlapping

fixed sidebar without overlapping

by Abhay Singh

HTML

<div class="header">This is the big boy header</div>
<div class="content">This is the content</div>
<div id="sidebar">
    <div id="scroller-anchor"></div>
    <div id="scroller" style="margin-top:10px; width:270px;background:yellow">
        <div style="min-height: 119px; " id="cart">COntent COntent
            <br/>COntent COntent
            <br/>COntent COntent
            <br/>COntent COntent
            <br/>COntent COntent
            <br/>COntent COntent</div>
    </div>
</div>
<div id="footer">The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here
    <br/>The poor footer lies here</div>

CSS

.header {
    width:100%;
    background:black;
    height:20px;
    color:#fff
}
.content {
    width:70%;
    background:blue;
    height:1200px;
    float:left;
    margin-top:10px;
    margin-bottom:10px
}
#sidebar {
    width:25%;
    background:yellow;
    float:right;
    margin-top:10px;
}
#footer {
    width:100%;
    background:gray;
    height:auto;
    clear:both
}

JavaScript

//<![CDATA[ 

$(function () {
    var a = function () {
        var b = $(window).scrollTop();
        var d = $("#scroller-anchor").offset().top;
        var f = $("#footer").offset().top;
        var c = $("#scroller");
        var h = $("#scroller").height() + 20; // margin

        if (b > d) {
            var myTop = $(window).scrollTop();
            if (myTop > f - h) myTop = f - h;
            c.css({
                position: "absolute",
                top: myTop,
                bottom: ""
            })
        } else {;
            if (b <= d) {
                c.css({
                    position: "absolute",
                    top: "",
                    bottom: ""
                })
            }
        }
    };
    $(window).scroll(a);
    a()

}); //]]>