Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <script id="template" type="text/x-handlebars-template">
  <div id="left">
    {{#each .}}
      <div class="box">
        <p>{{text}}</p>
      </div>
    {{/each}}
  </div>
  <div id="right">
    {{#each .}}
      <div class="box">
        <img src="{{img}}">
      </div>
    {{/each}}
  </div>
</script>
  
  <div id="scroller">
    <div id="innerScroller">
      
    </div>
  </div>
</body>
</html>
 
body {
  margin: 25px;
}
#scroller {
}
#innerScroller {
  background: wheat;
  position: relative;
  height: 250px;
  overflow: hidden;
}
#left {
  width: 50%;
  float: left;
  overflow: hidden;
  position: absolute;
}
#left p {
  top: 120px;
  position: relative;
  margin: 0;
  padding: 0;
}
#right {
  width: 50%;
  margin-left: 50%;
  height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#right img {
  height: 100%;
}
.box {
  height: 250px;
}
.box:nth-child(odd) {
  background: aqua;
}
 
data = [
  {
    text: 'hello',
    img: 'http://images.wisegeek.com/green-frog.jpg'
  },
  {
    text: 'goodbye',
    img: 'http://placekitten.com/201/301'
  },
  {
    text: 'hmmm',
    img: 'http://placekitten.com/202/302'
  },
  {
    text: 'hello',
    img: 'http://images.wisegeek.com/green-frog.jpg'
  },
  {
    text: 'goodbye',
    img: 'http://placekitten.com/201/301'
  },
  {
    text: 'hmmm',
    img: 'http://placekitten.com/202/302'
  },
  {
    text: 'hello',
    img: 'http://images.wisegeek.com/green-frog.jpg'
  },
  {
    text: 'goodbye',
    img: 'http://placekitten.com/201/301'
  },
  {
    text: 'hmmm',
    img: 'http://placekitten.com/202/302'
  }
];
​
$(document).ready(function(){
  
  var source   = $("#template").html();
  var template = Handlebars.compile(source);
  var htmls = template(data);
  $('#innerScroller').append(htmls);
  
  var left = $('#left');
  var leftHeight = left.height();
  var leftTop =  0 - leftHeight + $('#right').height();
  left.css('top', leftTop + 'px');
  
  $('#right').on('scroll', function(){
    
    var scro = parseFloat($('#right').scrollTop());
    console.log('scro:' + scro);
    
    var goal = leftTop + scro;
    console.log('goal: ' + goal);
    
    left.css('top', goal + 'px');
    
  });
  
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Chuck-Ferritpro
0viewers