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

而是使用CSS的媒體查詢這樣的事情。

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

Answer 2

第一個問題是，你只計算窗口的寬度一次（在頁面加載）。
一旦調整大小，它不會更新。
這就是爲什麼整個調整大小邏輯沒有任何影響。

您犯的另一個錯誤是在控制器上調用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/

希望這有助於
Ĵ