Question

我试图编写一个脚本，如果屏幕是一定的宽度，它将修复DIV。这是我到目前为止所做的，但逻辑不正确，我不知道如何写它。

var controller = new ScrollMagic();

var w = $(window).width();
if(w >= 500) {
    var sidebar = new ScrollScene()
        .triggerHook("0")
        .setPin("#sidebar-pin")
        .addTo(controller);   
}
$(window).on('resize',function(){
    if(w < 500) {
            controller.removePin("#sidebar-pin",true);
    } else {
    var sidebar = new ScrollScene()
        .triggerHook("0")
        .setPin("#sidebar-pin")
        .addTo(controller); 
  }
});

http://jsfiddle.net/gtowle/jxoewzoo/

我瞄准的逻辑是：

在页面加载时，如果窗口宽度大于500，请执行A.如果不是，请不执行任何操作。
在窗口调整大小时，如果窗口宽度小于500，请执行B，如果大于640，请执行A.

我认为我的问题是，我不确定在调整窗口大小后如何触发＃2。

Answer 1

第一个问题是你只计算了窗口的宽度一次（在页面加载时）调整大小后，它不会更新这就是整个调整大小逻辑没有任何影响的原因。

您犯的另一个错误是在控制器上调用removePin方法这是一种场景方法。

最后，您的逻辑每次都会创建一个新场景，而不是更新现有场景。

所以这就是你如何正确实现你想要的逻辑：

var controller = new ScrollMagic();

var sidebar = new ScrollScene({triggerHook: 0})
    .addTo(controller);

// page load
if($(window).width() >= 500) {
    sidebar.setPin("#sidebar-pin");
}

// resize
$(window).on('resize',function(){
    var w = $(window).width();
    if(w < 500) {
        sidebar.removePin("#sidebar-pin",true);
    } else if (w >= 640) {
        sidebar.setPin("#sidebar-pin");
    }
});

这是你的小提琴：http://jsfiddle.net/jxoewzoo/1/

希望这会有所帮助，
Ĵ

Answer 2

而是使用css媒体查询这样的事情。

onscroll的js代码：

var otherwise = true
if(w < 500) {
        Do B;
        otherwise = false;
}
if(w > 640) {
        Do A;
        otherwise = false;
}
If(otherwise) {
     var sidebar = new ScrollScene()
    .triggerHook("0")
    .setPin("#sidebar-pin")
    .addTo(controller); 
 }

基于窗口大小的有条件固定DIV

2 个答案: