javascript - 根据窗口大小有条件固定 DIV

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/

我的目标逻辑是:

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

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

Answer 1

第一个问题是您只计算了一次窗口宽度(在页面加载时)。
一旦您调整大小，它就不会更新。
这就是为什么整个调整大小逻辑没有任何效果。

您犯的另一个错误是调用 Controller 上的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");
    }
});

这是你的 fiddle :http://jsfiddle.net/jxoewzoo/1/

希望这有帮助，
J