Responsive parallax or layered vertical text effect

Question

I'm trying to reproduce the text effect as seen on http://www.balmain.com/en_eu/ - the text is vertically and horizontally centered in each div, but as you scroll down, the top position changes so that it has a parallax effect. As you scroll down, the text is replaced by the next div / image.

On mobile, the text stops functioning in this 'parallax' way which is why I'm trying to test for mobile below in my JS. It sounds like it's a very bad idea to attach handlers to the window scroll event, so I'll have to look at that as well, but I need to get the effect working first.

I'm really stuck on how to go about this as I looked through the code on the Balmain site, but I'm sure it could be done more simply than it is there so thought I'd ask here in case someone has done this before who could share their approach so I can learn?

Codepen

http://codepen.io/anon/pen/gbJavv

HTML

<section class="slide slide-1">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">One piece tees</span>
    </a>
</section>

<section class="slide slide-2">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">Company</span>
    </a>
</section>

<section class="slide slide-3">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">Values</span>
    </a>
</section>

<section class="slide slide-4">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">Shoes</span>
    </a>
</section>

<section class="slide slide-5">
    <img src="http://placehold.it/1200x800" />
    <a href="javascript:void(0);">
        <span class="slide--generic-title clearfix">Enter The Shop</span>
        <span class="slide--custom-title">T-shirts</span>
    </a>
</section>

CSS

/* SECTIONS LAYOUT */
section {
    position: relative;
    text-align: center;
    overflow: hidden;
}
section img {
    width:100%;
    height:auto;
}
section a {
    position: absolute;
    left:50%;
    top:50%;
    display:block;
    width:400px;
    margin-left:-200px;
    font-size: 2em;
    color:#000;
}

/* GENERAL STYLING */
body {
    padding:0;
    margin:0;
    font-family:arial, helvetica, verdana, sans-serif;
    font-size:0.9em;
    color:#333;
}
a {
    text-decoration: none;
}
img {
    display:block;
}
.clearfix:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0
}
section {
    border-bottom:1px solid #fff;
}

JQUERY

// Check for mobile (not perfect, but a good technique using Modernizr)
// Source: http://stackoverflow.com/a/17326467/621098
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch || 
    (deviceAgent.match(/(iphone|ipod|ipad)/) ||
     deviceAgent.match(/(android)/)  || 
     deviceAgent.match(/(iemobile)/) || 
     deviceAgent.match(/iphone/i) || 
     deviceAgent.match(/ipad/i) || 
     deviceAgent.match(/ipod/i) || 
     deviceAgent.match(/blackberry/i) || 
     deviceAgent.match(/webos/) || 
     deviceAgent.match(/bada/i)
    );

// Affect non-mobile devices on scroll
if (!isTouchDevice) {

    // On scroll
    $(window).scroll(function() {
        // Do stuff
    });

    // On resize
    $(window).resize(function() {
            // Do stuff
    });

} else {
    // Show the text centered in the section only
}

Answer 1

This should do the trick: https://jsfiddle.net/668t37ym/2/

Credit for the jQuery goes to @razzak, where he answered a similar question: Changing div content based on scroll position.

Every time the top of the element with id of scrollContent exceeds the position of the top of the element with class .post, the text from the element with the class .description is fetched and used to replace the contents of the center element. The divs with the text you want to display at a certain scroll position are hidden with the CSS display: none.

HTML:

<div>
    <div>
        <div style='height:300px;' class='post'>
            <p class="description" style="display: none;">---1. CONTENT AREA ONE---</p>
            Page Content / Image
        </div>
        <div style='height:250px;' class='post'>
            <p class="description" style="display: none;">---2. CONTENT AREA TWO---</p>
            Page Content / Image
        </div>
        <div style='height:350px;' class='post'>
            <p class="description" style="display: none;">---3. CONTENT AREA THREE---</p>
            Page Content / Image
        </div>
        <div style='height:200px;' class='post'>
            <p class="description" style="display: none;">---4. CONTENT AREA FOUR---</p>
            Page Content / Image
        </div>
        <div id='scrollContent'></div>
        <div style='height:800px;'></div>
    </div>
</div>

CSS:

.post {
    border: 4px ridge grey;
}

#scrollContent {
    position: fixed;
    top: 150px;
    right: 350px;
    height: 90px;
    width: 250px;
    background: grey;
    text-align: center;
}

.description {
    width: 200px;
    float: left;
    position: fixed;
    background: grey;
} 

JQUERY:

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#scrollContent').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#scrollContent').html($(this).find('.description').text()); 
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });
})