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

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

您犯的另一个错误是在控制器上调用 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/

希望这会有所帮助，
J

Answer 2

Instead use css mediaqueries for something like this.

The js code for onscroll:

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