2016-04-26 2 views
2

そんなことがあります。以下は https://jsfiddle.net/j6u6wp7x/1/scrollMagic - 正しい場所にスクロールするには?

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個の小さいイメージがあります。私はトップに飛び乗るようにしましたが、2位または3位にジャンプする方法はわかりません。

var scrollPos = controller.info ("scrollPos");は現在の位置を示していますが、正しく使用する方法はわかりません。

答えて

3

私はコードのビットビットを調べていませんでしたが、同様の状況ではJavaScriptの機能(jQueryではなく)を使用しました。

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

この多くのコードでは、このトリックを行う必要があります。 お手伝いをしてください。

EDIT:1

こんにちは、私はあなたのfiddleを更新し、私たちは、アレイ内のシーンを保存し、後でそれを参照する必要があると思います。私はあなたがそのようなものを探していたと思います。

+0

私は背景画像で置き換えられた画像を持っていますか? @SamGhatak –

+0

このような場合には、あなたが 'document.getElementsbByClassName(「クラス名」)を使用することができます。私は、背景画像を見ることができるように' ...要素を取得するためには、CSSクラス – SamGhatak

+0

を通って、クラスがまだされていない場合には追加されます追加?)@SamGhatak –

関連する問題