javascript - ScrollMagic 媒体查询？

Question

我正在使用此处找到的 ScrollMagic 插件。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码，但持续时间设置为像素。而且由于像素因您使用的设备而异，因此会引起问题。这是我当前的代码：

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);

    }

}());