<div id="leftSide">
        <div id="leftSideBottom"></div>

        <div id="leftSideTop">

            <div id="nav">
                <a href="#home" class="home"></a>
                <a href="#about" class="about"></a>
                <a href="#work" class="work"></a>
                <a href="#blog" class="blog"></a>
                <a href="#connect" class="connect"></a>
            </div>

        </div> <!-- end leftSideTop -->

    </div> <!-- end leftSide -->

    <div id="rightSide">

        <div id="rightSideBottom"></div>

        <div id="rightSideTop">

        </div> <!-- end rightSideTop -->

    </div> <!-- end rightSide -->

#leftSide {
       position: absolute;
       margin-top: 160px;
       top: 0;
       left: -20px;
   }

   #rightSide {
       position: absolute;
       margin-top: 160px;
       top: 0;
       left: 880px; // ie breaks if I use right: -20px
   }

   #rightSideTop, #leftSideTop {
       position: absolute;
       width: 100px;
       height: 600px;
   }

   #rightSideBottom, #leftSideBottom {
       position: absolute;
       width: 40px;
       height: 600px;
       right: 0; // leftSideBottom will have this set to left: 0, just combine code to simplify
       top: 0;
       z-index: -100;
   }

   .fixed {
       position: fixed;
       top: 150px;
   }

var aboutTop = $("#about").offset().top;
    var connectTop = $("#connect").offset().top;

    $(window).scroll(function(){
    var y = $(this).scrollTop();
    if(y >= aboutTop && y < connectTop){
        $("#greenSideLeftTop,#greenSideLeftBottom").addClass("fixed");
        $("#greenSideRightTop,#greenSideRightBottom").addClass("fixed");
    }
    else if(y >= connectTop){
        $("#greenSideLeftTop,#greenSideLeftBottom").removeClass("fixed");
        $("#greenSideRightTop,#greenSideRightBottom").removeClass("fixed");
        $("#leftSide").css("top",connectTop - 1080);
        $("#rightSide").css("top",connectTop - 1080);
    }

    else{
        $("#greenSideLeftTop,#greenSideLeftBottom").removeClass("fixed");
        $("#greenSideRightTop,#greenSideRightBottom").removeClass("fixed");
        $("#leftSide").css("top",aboutTop - 1080);
        $("#rightSide").css("top",aboutTop - 1080);
    }
});

<div id="rightSide">
    <div id="greenSideRightTop"></div>
    <div id="greenSideRightBottom"></div>
</div> <!-- end rightSide -->