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

希望这有助于
Ĵ