split screen

by lovromar

HTML

<div class="body">
    <div class="col left">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    <div class="col right">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</div>

CSS

html, body {
    margin:0;
    height:100%;
    width:100%;
}
.body {
    height:100%;
    position:relative;
}
.col {
    height:100%;
    width:50%;
    display:inline-block;
    margin:0;
}
.content {
    position:relative;
    height:100%;
}
.col.left .content:nth-child(odd) {
    background:steelblue;
}
.col.left .content:nth-child(even) {
    background:blue;
}
.col.right .content:nth-child(odd) {
    background:pink;
}
.col.right .content:nth-child(even) {
    background:red;
}
.col.right {
    position:fixed;
    top:0;
    right:0;
}

JavaScript

(function ($) {
    var top = 0;

    $(document).ready(function () {
        var contentHeight = $('.right').height(),
            contents = $('.right > .content').length;

        top = (0 - (contentHeight * (contents - 1)));

        $('.right').css('top', top + 'px');
    });

    $(window).resize(function () {
        var contentHeight = $('.right').height(),
            contents = $('.right > .content').length;

        top = (0 - (contentHeight * (contents - 1)));

        $('.right').css('top', (top + $(window).scrollTop()) + 'px');
    });

    $(window).scroll(function () {
        $('.right').css('top', (top + $(window).scrollTop()) + 'px');
    });

})(jQuery);