基於窗口大小的條件固定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/

希望這可以幫助，
Ĵ

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