jquery - 如何在 2 个不均匀的列中创建视差效果，以便它们在最后结束？

Question

我刚刚在 apple 的网站上看到了这个 2-column 的技巧，我觉得它很酷。

基本上，它们有两列，其中一列比另一列长，当您滚动页面时，一列会减慢速度以 catch 另一列，因此当您到达列的末尾时，它们会排在底部。

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

这就是我到目前为止得到的 https://jsfiddle.net/yfembtfq/列按应有的方式工作，并在与底部匹配时停止滚动

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

但是我需要它们仅在它们到达页面顶部时才开始滚动视差效果，而不是像您在 JSFiddle 上看到的那样在我开始滚动时就开始滚动

我已经尝试使用一种方法来检测它们是否到达页面顶部，但是对象的整个偏移量是错误的......我还需要找到一种方法来自动计算最终乘数 * 0.16 根据页面的高度和列的高度，因为这是决定右列滚动速度的因素，所以当底部可见时它们在最后匹配。

Answer 1

我喜欢 MacOS High Sierra 网站的效果。所以这是我的 codepen 的链接在那里我找到了一些解决方案。检查一下并给我一些反馈!

$(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)"
        });
    }
});