Javascript 自定义滚动动画-暂停部分并水平滚动元素

在一些单页应用程序中，用户可以进行垂直滚动，但页面看起来暂停并水平滚动，然后清除一个部分

我不确定他们是如何做到这一点的——我见过变换样式被应用，但不确定如果用户正常滚动，自然会出现的元素会发生什么

我添加了jquery wayward函数来检测何时显示嵌套排列

类似这样的内容：

下面是HTML片段。幻灯片1是一个完整的页面元素，幻灯片5和6也是如此。这些可以是菜单的锚。我感兴趣的是在这里创建的行为——当用户接近嵌套单元时——它锁定在幻灯片2的顶部，然后转换幻灯片3和4

$win.on（'scroll'，function（）{
var top=$win.scrollTop（）/3；
控制台日志（“顶部”，顶部）；
$nested.css（'transform'，'translate（'+-top++'px，0'）；
});

幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
我想出了这个解决方案，当幻灯片到达页面顶部时，它将激活水平滚动粘性


当嵌套幻灯片到达页面顶部时，将向嵌套添加一个粘性类。这将固定批次位置，并将嵌套转换为松散的旋转木马。当用户继续向下滚动时，嵌套将水平平移。清除最后一张嵌套幻灯片后，我删除了sticky类，为了让用户出现在正常行程中，我尝试将嵌套固定到幻灯片的高度和计数。尽管需要解决反向问题——如果有多个巢穴也需要解决

$nested.waypoint(function(direction) {    
  var distance = $nested.offset().top;
  var $nestedHeight = $nested.height();
  var $nestedCount = $nested.find(" > .section").length;
  var $nestedSectionWidth = $nested.next(".section").eq(0).width();

  var clearNestedWidth = $nestedSectionWidth * $nestedCount;
  var $window = $(window);

  $window.scroll(function() {
    if ($window.scrollTop() >= distance) {
      // Your div has reached the top        
      $nested.addClass("sticky");

      var $nestedCompactWidth = $nested.width();    
      var $win = $(window);

      $win.on('scroll', function() {
        var top = $win.scrollTop() / 3;   
        $nested.css('transform', 'translate(' + -top + 'px, 0)');

        if (top >= clearNestedWidth) {
          console.log("cleared slides - now clear sticky")
          $nested.removeClass("sticky");              
          $nested.css('height', $nestedHeight);
          //set scroll to end of slide 2
        }
      });

    } else {
      //$nested.removeClass("sticky");
    }
  });


}, {
  offset: '50%'
});

这只是给你一个如何实现的想法。您需要一个占位符容器
当幻灯片成为固定元素时，它将保留垂直空间

下面的代码可以处理同一页面中的多个幻灯片，您也可以实现
一旦你有了这个想法，你自己的


$（'.nested'）。每个（函数（）{
让$window=$（window），$body=$（'body'）；
让$nested=$（this），$nestedPlaceholder=$nested.parent（）；
让垂直滚动范围，上边距，下边距；
$window.resize（函数（）{
$nested.removeClass（“sticky”）.css（{left:0}）；
let placeholder height=$nestedPlaceholder.css（{height:'}）.height（）；
verticalScrollRange=占位符高度-$window.height（）；
upperMargin=$nestedPlaceholder.offset（）.top；
lowerMargin=上边距+垂直滚动范围；
$nestedPlaceholder.height（占位符高度）；
});
$window.scroll（函数（）{
让scrollTop=$window.scrollTop（）；
如果（scrollTop>upperMargin&&scrollTop
正文{
背景：线性梯度（至底部，#ffcb77 0%，#deaaff 100%）；
}
.科{
高度：100vh；
字号：5em；
文本对齐：居中；
位置：相对位置；
边框：1px纯红；
}
.嵌套.节{
宽度：100vw；
}
.嵌套占位符{
溢出：隐藏；
}
.粘的{
位置：固定；
z指数：1；
排名：0；
高度：100vh；
空白：nowrap；
}
.粘性部分{
显示：内联块；
}

开始向下滚动！
幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
我已尝试捕获必要的信息片段嵌套截面高度和宽度，计数-向下滚动时滚动有效-我现在尝试在清除最后一个部分后清除粘性滚动和水平滚动-但继续滑动5并反转功能时出现故障-可能需要重新评估翻译var newDistance=top-distance$css（'transform'，'translate（+（$nestedSectionWidth newDistance）+'px，0'）；如果所有面板都是嵌套的，但有些面板只包含一张幻灯片，因此水平幻灯片不会显示，那么如果将新幻灯片添加到不同的单独区域，功能可能会更加动态，从而使其正常工作。在幻灯片4结束时，您会有一种奇怪的震动。在一个有响应的环境中，这是否也能起作用？比如用户翻转了ipad的方向？你能修复这个错误，使它更平滑地过渡吗？再整理一下代码，你想整理什么部分？转换是由于显示/隐藏固定的
.nested
元素造成的，无论如何都无法摆脱它。您可以减少震动从幻灯片中删除边框、边距和填充物，并使幻灯片与窗口大小完全相同。试试看，如果你卡住了，我会帮你的。干杯-我还有一个滚动问题需要解决--