Different scroll test

by Jayson Buquia

HTML

<div class="top">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias repellendus, ratione? Iusto ratione cumque quidem perferendis ducimus. Ipsa aliquam, porro doloribus? Dicta aperiam in, eum laboriosam dignissimos reiciendis tempore odit.</div>
    <div>Ratione, repellat unde accusamus beatae eligendi sunt, veritatis iste voluptatem aut odio alias nam placeat minima. Placeat aut porro itaque, asperiores et quae culpa dolorum sed, sunt, nulla provident alias?</div>
    <div>Aliquam laudantium impedit aut deserunt amet ad qui incidunt voluptatem eius excepturi quia debitis accusamus, pariatur velit numquam veritatis fuga aperiam rem corporis illo, obcaecati accusantium eveniet animi dolor. Explicabo?</div>
    <div>Assumenda provident, aliquid necessitatibus culpa quibusdam laborum optio illo placeat, pariatur iure beatae, commodi dignissimos, ratione eos ad! Repudiandae id, accusantium, maiores officia asperiores aliquam velit voluptatum qui at blanditiis!</div>
    <div>Temporibus recusandae natus non ullam numquam earum deserunt esse nesciunt exercitationem, a nemo cupiditate cumque dignissimos laboriosam repudiandae est, ipsam pariatur laborum maiores. Quidem vero facilis ipsam nihil sequi, tempore?</div>
</div>

<div class="main">
    <div class="col col-tall">
        <img src="http://www.lorempixel.com/150/230/city" alt=""> 
            <img src="http://www.lorempixel.com/150/230/city" alt=""> 
                <img src="http://www.lorempixel.com/150/230/city" alt=""> 
                    <img src="http://www.lorempixel.com/150/230/city" alt=""> 
                        <img src="http://www.lorempixel.com/150/230/city" alt=""> <img src="http://www.lorempixel.com/150/230/city" alt=""> 
                            <img src="http://www.lorempixel.com/150/230/city" alt=""> 
                                <img src="http://www.lorempixel.com/150/230/city" alt=""> 
                                    <img...

SCSS

.main {
    position: relative;
    text-align: center;
}

.top {
    /* display: none; */
}

.col {
    width: 35%;
    
    &:first-child {
        position: absolute;
        top: 0;
        left: 0;
    };
    &:nth-child(2) {
        width: 20%;
        display: inline-block;
    }
    &:last-child {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    img {
        width: 100%;
    }
}

.col-tall {
    background: #ffd;
    
    &:last-child {
       /* display: none; */
    }
}

JavaScript

var $main = $('.main'),
    mainHeight = $main.outerHeight(),
    $normal = $('.col-normal'),
    normalHeight = $normal.height(),
    normalDiff = normalHeight = mainHeight,
    $tall = $('.col-tall'),
    triggerTop = $main.offset().top,
    triggerBottom = $main.offset().top+$main.height()-$(window).height();

console.log(triggerBottom);

$tall.each(function(){
    var $col = $(this),
        colHeight = $col.outerHeight(),
    	speed = (colHeight-mainHeight)/(mainHeight-$(window).height());
    
    	$(window).on('scroll',function(){
            console.log($(window).scrollTop());
            if ( $(window).scrollTop() < triggerTop  ) {
             requestAnimationFrame(function(){
	 $col.css('top',0);
         }); 
            }
        else if ( $(window).scrollTop() > triggerBottom ) {
         requestAnimationFrame(function(){
	 $col.css('top',-colHeight+mainHeight);
         }); 
            console.log('should stop now');
        } else {
        requestAnimationFrame(function(){
	 $col.css('top',-(($(window).scrollTop()-triggerTop)*speed));
         }); 
        
        }
       });

});