javascript - ScrollMagic 媒体查询？

Question

我正在使用 ScrollMagic 插件，发现 here 。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码，但持续时间设置为像素。由于像素根据您使用的设备而不同，因此会导致问题。这是我当前的代码:

var controller = new ScrollMagic.Controller();

//Pen sticks to page (PATIENT-PAGE)
new ScrollMagic.Scene({
    duration: 2300,
    offset: 0
})
.setPin(".patient-pen")
.addTo(controller);

这实际上设置起来非常简单。现在，我真正想做的是这样的:

if(mobile == true) {
    var myDuration == 500;
} else {
    var myDuration == 2300;
}

new ScrollMagic.Scene({
    duration: myDuration,
    offset: 0
})
.setPin(".patient-pen")
.addTo(controller);

这个插件可以实现吗？是否有捷径可寻？我在文档中没有看到任何有关它的内容。

Answer 1

我刚刚这样做了，现在似乎可以正常工作了。

(function(){
    var width = window.innerWidth,
    height = window.innerHeight;
    console.log( width + ' : ' + height );

    if (width >= 768) {
    //Pen sticks to page (HCP-PAGE)
    new ScrollMagic.Scene({
        // duration: 2400,
        duration: 2400,
        offset: 0
    })
    .setPin(".pen")
    .addTo(controller);

    //Pen sticks to page (PATIENT-PAGE)
    new ScrollMagic.Scene({
        duration: 2300,
        offset: 0
    })
    .setPin(".patient-pen")
    .addTo(controller);
} else if (width < 768) {
        //Pen sticks to page (HCP-PAGE)
    new ScrollMagic.Scene({
        // duration: 2400,
        duration: 1250,
        offset: 0
    })
    .setPin(".pen")
    .addTo(controller);

    //Pen sticks to page (PATIENT-PAGE)
    new ScrollMagic.Scene({
        duration: 1250,
        offset: 0
    })
    .setPin(".patient-pen")
    .addTo(controller);

    }

}());