Question

有这样的事情。 https://jsfiddle.net/j6u6wp7x/1/

var scene;
var controller;
$(document).ready(function() {
    parallaxAuto();
    $('.viewer__nav div').click(function(event) {
        var num = $(this).attr('data-num');
        if (num == 'sticky') {
            controller.scrollTo(scene);
        }
        var scrollPos = controller.info("scrollPos");
    });
});

function hideShow(num, block) {
  block.find("div.active").removeClass("active").animate({ opacity: 0,},300);
  block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300);
}
// init variables
function parallaxAuto() {
    var viewer       = document.querySelector('.viewer.active'),
    frame_count  = 5,
    offset_value = 500;

    // init controller
    controller = new ScrollMagic.Controller({
      globalSceneOptions: {
        triggerHook: 0,
        reverse: true
      }
    });

    // build pinned scene
    scene = new ScrollMagic.Scene({
      triggerElement: '#sticky',
      duration: (frame_count * offset_value) + 'px',
      reverse: true
    })
    .setPin('#sticky')
    //.addIndicators()
    .addTo(controller);

    // build step frame scene
    for (var i = 1, l = frame_count; i <= l; i++) {
      new ScrollMagic.Scene({
          triggerElement: '#sticky',
          offset: i * offset_value
        })
        .setClassToggle(viewer, 'frame' + i)
        //.addIndicators()
        .addTo(controller);
    }
}

下面有3个较小的图像可以创建导航。我让它跳到顶部，但我无法弄清楚如何跳到第二或第三。

var scrollPos = controller.info ( "scrollPos");显示当前位置，但我无法想象如何正确使用它。

Answer 1

我没有查看代码的tit-bits，但在类似的情况下，我们使用了JavaScript的scrollIntoView()函数（不是jQuery）。

var element = document.getElementById('id of your image');
element.scrollIntoView(false);

这么多代码应该可以解决问题。希望它有所帮助。

编辑：1

嗨，我更新了你的fiddle，我想我们需要将场景存储在一个数组中，然后再引用它。我想你正在寻找类似的东西。

scrollMagic - 如何滚动到正确的位置？

1 个答案: