How to create the parallax effect in 2 uneven columns so they end even at the end?

Question

I just saw this 2-column trick on apple's website, and I think it's pretty cool.

Basically, they have two columns where one is longer than the other and when you scroll the page, one column slows down to catch up with the other so when you get to the end of the columns they line up at the bottom.

https://www.apple.com/macos/high-sierra-preview/

this is what i've got so far https://jsfiddle.net/yfembtfq/ columns work as they should and stop scrolling when they match the bottoms

$(window).scroll(function() {
  var marginvariant = $(window).scrollTop() * (($('#left').height() / $('#right').height()) * 0.16);
  marginvariant = Math.round(marginvariant);
  var $left = $('#left'); //record the elem so you don't crawl the DOM everytime
  var leftbottom = $('#left').height() - $left.position().top - marginvariant;
  var $right = $('#right'); //record the elem so you don't crawl the DOM everytime
  var rightbottom = $('#right').height() - $right.position().top;
  var bottomdif = leftbottom - rightbottom;
  if (bottomdif >= 0) {
    $('#left').css('margin-top', -marginvariant);
  }
});

however i need them to start the scrolling parallax effect only when they reach the top of the page not as soon as i start scrolling as you can see on JSFiddle

I've tried using a way to detect if they reach the top of the page but then the entire offset of objects is wrong... also i need to find a way to automatically calculate the final multiplier * 0.16 according to the height of the page and height of the columns, as this is what dictates the speed of the right column scroll so they kind of match at the end when the bottoms are visible.

Answer 1

I love the effect from MacOS High Sierra website. So here's a link to my codepen where I found somewhat of a solution. Check it out and give me some feedback!

$(window).on("load resize scroll",function(e){
var col1 = $("#left").outerHeight();
var col2 = $("#right").outerHeight();
var travel = col1 - col2;

var topOfColumns = $('.parallax').offset().top;
var columns = $('.parallax').outerHeight() - $(window).innerHeight();
var scrollInterval = columns / travel;

    var e = Math.round( ($(window).scrollTop() - topOfColumns ) / scrollInterval);
    //find the bottom of the right column and give a Bool (true)
    var b = $(window).scrollTop() >= $('#right').offset().top + $('#right').outerHeight() - window.innerHeight;

    //if the user scrolls to the top of the columns and the user has not scrolled to the bottom of the right column
    if ($(window).scrollTop() >= topOfColumns && b == false ) {
        $("#right").css({
            "-webkit-transform": "translate3d(0px, " + e + "px, 0px)",
               "-moz-transform": "translate3d(0px, " + e + "px, 0px)",
                "-ms-transform": "translate3d(0px, " + e + "px, 0px)",
                 "-o-transform": "translate3d(0px, " + e + "px, 0px)",
                      transform: "translate3d(0px, " + e + "px, 0px)"
        });
    }
});