1

Here is what I've been working with. Everything is working great, except that if you scroll down a bit, you will see the alignment gets progressively more off as you scroll down. The #left div should be moving via .css('top') the same distance as the #right div's scrollTop() but over time, the place where the boxes interscect creeps up the containing div#innerScroller.

If you compare where the frog lines up at first, to where it lines up the second time it appears, you will see my issue.

Don't worry about the handlebars stuff... the relevant JS is quite small:

  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());

    var goal = leftTop + scro;

    left.css('top', goal + 'px');
    
  });

Thanks!

Edit:

Just to say it, this works, but is very hackey and not the kind of solution I am looking for:

var scro = (parseFloat($('#right').scrollTop())) * 1.062;

Community
  • 1
  • 1
dezman
  • 18,087
  • 10
  • 53
  • 91

1 Answers1

2

You actually have two issues.

The first issue is all of your <p> tags on the left side. See this answer: remove space above and below <p> tag HTML

The simplest CSS fix will be:

p {
    margin: 0;
    padding: 0;
}

After this fix, the two sides are much more closely lined up but are still slightly offset. Looking at the console output, the right side is still able to scroll 4 pixels too far. This is a common issue with Ignore whitespace in HTML. If you add:

#right {
    font-size: 0;
}

the extra space goes away, and everything lines up perfectly!

Community
  • 1
  • 1
George
  • 4,147
  • 24
  • 33