Scroll Divs like Presentation

HTML

<div class="panel panel-one">
    <div class="panel-inner">
    By putting employee happiness and teamwork first,
we guide your company to become a great place to work.
    </div>
</div>

<div class="panel panel-two">
    <div class="panel-inner">
        We believe in the importance of letting people's
personality, skills, talents and motivation
shape the future of their workplace. 
    </div>
</div>

<div class="panel panel-three">
    <div class="panel-inner">
        We put people first. In the right environment,
each team will find their own solutions. 
    </div>
</div>

<div class="panel panel-four">
    <div class="panel-inner">
        Let us discuss working better together!

Contact us at [email protected].
    </div>
</div>

CSS

html, body {
    height: 100%;
    }

.panel {
    position: relative;
    min-height: 500px;
    z-index: 5;
    }
    .panel-fixed {
        z-index: 1;
        }
    .panel-inner {
        padding: 1em;
        width: 100%;
        }
        .panel-fixed .panel-inner {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
            }

.panel-one {
    background-color: red;
    }

.panel-two {
    background-color: blue;
    }

.panel-three {
    background-color: green;
    }

.panel-four {
    background-color: green;
    }
    
/* Base */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body {
    font: 100%/1.5 Arial, sans-serif;
    }

h1, h2, h3 {
    margin-bottom: 1.5em;
    font-weight: bold;
    }

JavaScript

$(function() {

    // Set up vars
    var _window = $(window),
        panels = $('.panel'),
        panelsY = [];

    // Cache position of each panel
    $.each(panels, function(i, el) {
        panelsY.push(panels.eq(i).offset().top);
    });

    // Bind our function to window scroll
    _window.bind('scroll', function() {
        updateWindow();
    });

    // Update the window
    function updateWindow() {
        var y = _window.scrollTop();

        // Loop through our panel positions
        for (i = 0, l = panels.length; i < l; i++) {
            /* 
                Firstly, we break if we're checking our last panel,
                otherwise we compare if he y position is in between
                two panels
            */
            if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
                break;
            }
        };

        // Update classes
        panels.not(':eq(' + i + ')').removeClass('panel-fixed');
        panels.eq(i).addClass('panel-fixed');
    };

});