조건부 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/

내가 목표로하고있어 논리는 다음 윈도우 폭이 500보다 큰 경우, 아무것도하지 않은 경우 페이지로드

1. 는 A.을한다. 창 크기 조정에
2. 는 윈도우 폭, B 500 이하 않을 수 없게 된 경우와는 640을 넘을 경우, 내 문제는 내가 트리거하는 방법을 잘 모르겠어요 것을 생각 A.에게

을 창 크기가 조정되면 # 2.

Answer 1

대신에 이와 같은 이유로 css mediaqueries를 사용하십시오. 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); 
} 

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/

희망,
J