Horizontal Reverse Scroll

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

by rulokc

HTML

<div id="container">
  
  <div id="layout">
    <div class="row top">
      <ul>
        <li><img src="http://lorempixel.com/150/75/animals/1"></li>
        <li><img src="http://lorempixel.com/150/75/animals/2"></li>
        <li><img src="http://lorempixel.com/150/75/animals/3"></li>
        <li><img src="http://lorempixel.com/150/75/animals/4"></li>
        <li><img src="http://lorempixel.com/150/75/animals/5"></li>
        <li><img src="http://lorempixel.com/150/75/animals/6"></li>
        <li><img src="http://lorempixel.com/150/75/animals/7"></li>
      </ul>
    </div>

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

    <div class="row bottom">
      <ul>
        <li><img src="http://lorempixel.com/150/75/nature/1"></li>
        <li><img src="http://lorempixel.com/150/75/nature/2"></li>
        <li><img src="http://lorempixel.com/150/75/nature/3"></li>
        <li><img src="http://lorempixel.com/150/75/nature/4"></li>
        <li><img src="http://lorempixel.com/150/75/nature/5"></li>
        <li><img src="http://lorempixel.com/150/75/nature/6"></li>
        <li><img src="http://lorempixel.com/150/75/nature/7"></li>
      </ul>
    </div>
  </div>

</div>

CSS

body {
  margin: 0;
  background: #fff;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}
#container {
  position: relative;
  height: 225px; /* 3*row_height */
}
.row {
  width: 1050px; /* 7*row_width */
  left: 0;
  position: absolute;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
}
img {
  display: block;
}
.top {
  top: 0;
}
.middle {
  position: fixed;
  top: 75px; /* row_height */
}
.bottom {
  bottom: 0;
}

JavaScript

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