Vertical Reverse Scroll

Inspired by http://www.ballantyne.it/ Demo: http://rulokc.heliohost.org/demo/vertical-reverse-scroll/

by rulokc

HTML

<div id="container">
  
  <div id="layout">
    <div class="col left">
      <ul>
        <li><img src="http://lorempixel.com/100/200/animals/1"></li>
        <li><img src="http://lorempixel.com/100/200/animals/2"></li>
        <li><img src="http://lorempixel.com/100/200/animals/3"></li>
        <li><img src="http://lorempixel.com/100/200/animals/4"></li>
        <li><img src="http://lorempixel.com/100/200/animals/5"></li>
        <li><img src="http://lorempixel.com/100/200/animals/6"></li>
        <li><img src="http://lorempixel.com/100/200/animals/7"></li>
      </ul>
    </div>

    <div class="col middle">
      <ul>
        <li><img src="http://lorempixel.com/100/200/cats/1"></li>
        <li><img src="http://lorempixel.com/100/200/cats/2"></li>
        <li><img src="http://lorempixel.com/100/200/cats/3"></li>
        <li><img src="http://lorempixel.com/100/200/cats/4"></li>
        <li><img src="http://lorempixel.com/100/200/cats/5"></li>
        <li><img src="http://lorempixel.com/100/200/cats/6"></li>
        <li><img src="http://lorempixel.com/100/200/cats/7"></li>
      </ul>
    </div>

    <div class="col right">
      <ul>
        <li><img src="http://lorempixel.com/100/200/nature/1"></li>
        <li><img src="http://lorempixel.com/100/200/nature/2"></li>
        <li><img src="http://lorempixel.com/100/200/nature/3"></li>
        <li><img src="http://lorempixel.com/100/200/nature/4"></li>
        <li><img src="http://lorempixel.com/100/200/nature/5"></li>
        <li><img src="http://lorempixel.com/100/200/nature/6"></li>
        <li><img src="http://lorempixel.com/100/200/nature/7"></li>
      </ul>
    </div>
  </div>

</div>

CSS

body {
  background: #fff;
  margin: 0;
}
#container {
  width: 300px;
  margin: 0 auto;
}
.col {
  width: 100px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  display: block;
}
.left {
  float: left
}
.middle {
  position: fixed;
  margin-left: 100px;
}
.right {
  float: right;
}

JavaScript

//$(window).load(function() {
  var $el = $('.middle');
  var start = $(window).height() - $el.height();
  $el.css( {top: start + 'px'} );
  $(window).on('scroll', function() {
    $el.css( {top: start + $(window).scrollTop() + 'px'} );
  });
//});