ScrollMagic媒体查询？

Question

我正在使用找到here的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);

    }

}());